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

【问题标题】：Move text insertion point (caret) on click单击时移动文本插入点（插入符号）
【发布时间】：2020-01-22 22:25:47
【问题描述】：

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

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

这在将焦点设置在最接近用户单击位置的文本字段上时效果很好，即使不是直接在文本字段本身上也是如此。但是，文本插入点（插入符号）总是自动放置在输入的左侧，而不是输入的最近的 x 点。

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

图片： what I have now | what I want to happen

【问题讨论】：

你能详细说明你需要什么，可能有一个例子吗？很遗憾，我不明白你的问题。
嗨@LajosArpad - 谢谢，我已经编辑了添加图片的问题
而不是专注于文本字段，尝试根据原始鼠标位置在其边界内模拟点击。您可能需要有条件地处理字段上的实际点击，并且基于浏览器窗口大小的定位可能是一个问题。

标签： javascript html textinput caret

【解决方案1】：

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

否则，要弄清楚字符位置真的非常非常困难......字体很奇怪，而且我知道在 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>

【讨论】：

【解决方案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/

这个想法是找出光标应该在哪里并将其用作 padding-left。

【讨论】：