Javascript 单击时移动文本插入点（插入符号）

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

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

这可以很好地将焦点设置在距离用户单击位置最近的文本字段上，即使不是直接设置在文本字段本身上。但是，文本插入点（插入符号）始终自动放置在输入的左侧，而不是输入的最近x点

使用vanilla JS，我如何进一步查找文本插入点（插入符号）并将其移动到距离用户单击位置最近的位置（假设字段中有文本）

图像：

---

|

您可以覆盖一种更大的粗糙文本输入，然后使用它的文本定位来进行真正的输入

否则，很难确定角色的位置。。。字体很奇怪，据我所知，在js中没有办法精确地确定它们的位置

constbyid=（id）=>document.getElementById（id）；
const on=（el，event，cb）=>el.addEventListener（event，cb）；
const textEl=byId（“文本”）；
const hackEl=byId（“Hack”）；
on（textEl，“输入”，（）=>hackEl.value=textEl.value）；
在（hackEl）上，单击“，（）=>{
const charFocusPos=hackEl.selectionStart；
textEl.focus（）；
textEl.selectionStart=textEl.selectionEnd=charFocusPos；
});
#容器{
位置：相对位置；
显示：内联块；
}
#砍{
转换：转换（-50%，-50%）scaleY（5）；
位置：绝对位置；
最高：50%；
左：50%；
宽度：100%；
不透明度：0；
填充顶部：0px；
垫底：0px；
高度：16px；
边界：无；
大纲：无；
}
#哈克，shownhover:hover{
不透明度：0.1；
}
#哈克，#文本{
字体大小：16px；
字体系列：arial；
}

切换Hack Layer
您可以覆盖一种更大的Hack文本输入，然后使用它的文本定位进行真正的输入

否则，很难确定角色的位置。。。字体很奇怪，据我所知，在js中没有办法精确地确定它们的位置


constbyid=（id）=>document.getElementById（id）；
const on=（el，event，cb）=>el.addEventListener（event，cb）；
const textEl=byId（“文本”）；
const hackEl=byId（“Hack”）；
on（textEl，“输入”，（）=>hackEl.value=textEl.value）；
在（hackEl）上，单击“，（）=>{
const charFocusPos=hackEl.selectionStart；
textEl.focus（）；
textEl.selectionStart=textEl.selectionEnd=charFocusPos；
});
#容器{
位置：相对位置；
显示：内联块；
}
#砍{
转换：转换（-50%，-50%）scaleY（5）；
位置：绝对位置；
最高：50%；
左：50%；
宽度：100%；
不透明度：0；
填充顶部：0px；
垫底：0px；
高度：16px；
边界：无；
大纲：无；
}
#哈克，shownhover:hover{
不透明度：0.1；
}
#哈克，#文本{
字体大小：16px；
字体系列：arial；
}

切换黑客层
您可以实现这一点。我做了一些可以作为起点的东西：

<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>

见：

我们的想法是找出光标应该在哪里，并将其用作左边的填充。
您可以实现这一点。我做了一些可以作为起点的东西：

<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>

见：

这样做的目的是找出光标应该放在哪里，并将其用作左边的填充。
您能否详细说明您需要什么，可能需要举个例子？不幸的是，我不理解你的问题。您好@LajosArpad–谢谢，我已经编辑了这个问题以添加图像。如果不关注文本字段，请尝试根据原始鼠标位置在其边界内模拟单击。您可能需要有条件地处理字段上的实际单击，并且基于浏览器窗口大小的定位可能是一个问题。您能否详细说明您需要什么，可能需要一个示例？不幸的是，我不理解你的问题。您好@LajosArpad–谢谢，我已经编辑了这个问题以添加图像。如果不关注文本字段，请尝试根据原始鼠标位置在其边界内模拟单击。您可能需要有条件地处理字段上的实际单击，基于浏览器窗口大小的定位可能是一个问题。