单击时移动文本插入点(插入符号)

Question

为了通过捕获表单中的错误点击来增强用户体验，我在每个文本字段周围的边界框上使用以下代码：

focusMethod = function getFocus() {           
document.getElementById("myTextField").focus();
}

这在将焦点设置在最接近用户单击位置的文本字段上非常有效，即使不是直接在文本字段本身上也是如此。但是，文本插入点(插入符号(始终自动放置在输入的左侧，而不是输入的最接近的 x 点。

使用vanilla JS，我怎样才能更进一步，找到文本插入点(插入符号(并将其移动到最接近用户单击的位置(假设字段中有文本(？

图像： 我现在拥有的 |我想发生什么

Answer 1

您可以覆盖一种更大的粗暴文本输入，然后使用其中的文本定位作为真正的输入。

否则，要弄清楚角色位置真的非常非常困难......字体很奇怪，我知道在 js 中没有办法弄清楚它们的确切位置。

const byId = (id) => document.getElementById(id);
const on = (el, event, cb) => el.addEventListener(event, cb);
const textEl = byId("Text");
const hackEl = byId("Hack");
on(textEl, "input", () => hackEl.value = textEl.value);
on(hackEl, "click", () => {
const charFocusPos = hackEl.selectionStart;
textEl.focus();
textEl.selectionStart = textEl.selectionEnd = charFocusPos;
});

#Container {
position: relative;
display: inline-block;
}
#Hack {
transform: translate(-50%, -50%) scaleY(5);
position: absolute;
top: 50%;
left: 50%;
width: 100%;
opacity: 0;
padding-top: 0px;
padding-bottom: 0px;
height: 16px;
border: none;
outline: none;
}
#Hack.showOnHover:hover {
opacity: 0.1;
}
#Hack, #Text {
font-size: 16px;
font-family: arial;
}

<div id="Container">
<input type="textbox" id="Text">
<input type="textbox" id="Hack"></div>
</div>
<button onClick="byId('Hack').classList.toggle('showOnHover')">Toggle Hack Layer</div>

Answer 2

你可以实现这一点。我准备了一些可以作为起点的东西：

<div id="container">
<input type="text" id="input">
<br>
<br>
</div>
<script type="text/javascript">
var testInput = document.getElementById("input");
var testContainer = document.getElementById("container");
document.getElementById("container").addEventListener("click", function(event) {
testInput.focus();
var padding = 0;
console.log(event.clientX);
console.log(testInput.getBoundingClientRect().left);
console.log(testInput.getBoundingClientRect().right);
if (event.clientX > testInput.getBoundingClientRect().right) padding = (testInput.getBoundingClientRect().right * 0.8);
else if (event.clientX > testInput.getBoundingClientRect().left) padding = (event.clientX - testInput.getBoundingClientRect().left);
testInput.style["padding-left"] = padding + "px";
});
</script>

和

#container {
width: 90%;
margin: auto;
background-color: gray;
}
#input {
width: 80%;
margin-top: 100px;
margin-left: 10%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

请参阅：https://jsfiddle.net/mLqj17xe/1/

这个想法是找出光标应该在哪里，并将其用作左填充。