Javascript 根据鼠标在输入字段中的移动查找字符位置

我需要根据鼠标移动在输入字段中找到字符的位置

例如：如果输入字段的值为'abcde'，并且我正在移动 将鼠标移到字符“a”上，则位置将为1，“b”将为其他字符提供2，依此类推

我确实找到了一些与selectionStart等相关的示例，但它们仅在插入符号放置在某个位置，然后找到放置的位置时才起作用

我要寻找的是——无论鼠标何时在字符上移动，输入字段中可能有/可能没有点击完成——我能够知道字符的位置，鼠标悬停在哪里

我不知道如何将鼠标坐标分别转换为字符位置。有这样的javascript API吗

非常感谢任何帮助/建议/想法

更新

我的最终目标是当拖动发生在contenteditable div上时自动移动插入符号。我发现了下面的链接，询问类似的问题-但到目前为止还没有建议的解决方案

caret auto move - https://stackoverflow.com/questions/12397792/update-caret-position-of-input-and-insert-text-on-drop-event/53660415#53660415

我还添加了另一个示例来显示本机拖动与jQuery拖动的不同行为。我使用的jQuery Dragable不支持插入符号的自动拖动

Jquery:您可以尝试（我不确定这是否满足您的需要）您可以阅读，但它的信息量不大

Javascript解决方案：

我四处寻找已有的解决方案，但关于悬停/鼠标悬停，我只找到了一个潜在的适应性解决方案。这段代码不是我的，它是根据卡洛斯·德尔加多（Carlos Delgado）发现的一把公共小提琴改编而成的（我改编后，如果您将鼠标悬停在“显示位置”文本上，它将显示光标位置）。它还演示了如何使用

选择开始

和

选择结束

，因此，如果选择了文本，将显示开始和结束位置。如果使用箭头键向前或向后移动光标，然后再次悬停，将显示更新的光标位置

而且

函数getInputSelection（el）{ var start=0， 结束=0， 标准化值、范围、， textInputRange，len，endRange； if（el.selectionStart的类型=“number”&&type el.selectionEnd==“number”）{ 开始=el.selectionStart； 结束=el.selectionEnd； }否则{ range=document.selection.createRange（）； if（range&&range.parentElement（）==el）{ len=el.value.length； normalizedValue=el.value.replace（/\r\n/g，“\n”）； //创建仅存在于输入中的工作TextRange textInputRange=el.createTextRange（）； textInputRange.moveToBookmark（range.getBookmark（））； //检查选择的开始和结束是否在最末端 //由于moveStart/moveEnd不返回我们想要的内容，所以 //在这些情况下 endRange=el.createTextRange（）； endRange.collapse（假）； if（textInputRange.compareEndPoints（“StartToEnd”，endRange）>-1）{ 开始=结束=长； }否则{ start=-textInputRange.moveStart（“字符”、-len）； start+=normalizedValue.slice（0，start）.split（“\n”）.length-1； if（textInputRange.compareEndPoints（“EndToEnd”，endRange）>-1）{ 结束=len； }否则{ end=-textInputRange.moveEnd（“字符”，-len）； end+=normalizedValue.slice（0，end）.split（“\n”）.length-1； } } } } 返回{ 开始：开始， 完:完 }; } document.getElementById（“触发器”）.addEventListener（“鼠标悬停”，函数（）{ var input=document.getElementById（“texto”）； var inputContent=input.value.length； //如果文本框不可用，您可能需要将其对焦 input.focus（）； var结果=getInputSelection（输入）； var resultSpan=document.getElementById（“结果”）； if（result.start==result.end）{ resultSpan.innerHTML=“未选择任何文本。光标位置为“+inputContent”的“+result.start+”； }否则{ resultSpan.innerHTML=“您已经从“+inputContent”的总长度中选择了文本（“+result.start+”到“+result.end+”）； } }，假）

#触发器{背景：#ff8890；}

获取文本区域或文本输入或选定文本中的光标位置。

显然，您可以通过在文本节点上注册maybe handler来获得鼠标指针的位置，但您可能无法获得单个字符的准确位置，因为并非所有字符的大小都相同。例如，字符

l

或

i

和

w

具有不同的宽度。我认为您直接查找的内容没有任何意义，因为您将只使用文本节点。您可以为每个字符将文本拆分为

span

（或其他内联标记），并控制

mouseenter

和

mouseleave

，但这听起来过于复杂（而且可能太贵，尤其是如果它是一个长文本）。如果您使用单空格字体，您可以通过获取容器中的鼠标坐标来计算位置。请添加您尝试过的内容，感谢您的帮助-但这仍然无法解决我的问题。前面提到的解决方案从文本框中选择插入符号的位置。我正在寻找的用例是，当字符悬停在上方时，有一种方法可以找到位置。例如，插入符号可能放在字符串“abcde”的末尾，但鼠标悬停在“b”上，我可以得到位置2。@VidushiGupta您尝试过其他答案吗？它们并不完全相同。我之所以需要这样做，是为了实现原生HTML DragTable支持的功能，当你移动拖动的项目时，相应的插入符号会随之移动。这在jQuery可拖动库中丢失了，因此我正在尝试使用它