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

Question

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

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

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

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

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

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>