javascript - 将文本框插入符号移至光标

Question

我有一个文本区域，当悬停时，我希望插入符号跟随光标。就像我每次移动鼠标时都单击文本区域一样。这是我当前的js:

$("textarea").on("mousemove", function() {
    $(this).trigger("click");
});

我不想移动鼠标，而是移动文本区域中的插入符号。 Codepen link

<小时/> 更新

jQuery Set Cursor Position in Text Area类似，但我如何使用鼠标的坐标来使用此方法设置插入符位置。如果我收到 X:120 Y:244 如何使用此方法来设置插入符

Answer 1

您可能会重新考虑实现此类功能的原因有几个。

<强>1。性能 mouseover 会在很短的时间内触发大量事件，您必须重新计算插入符位置。在低端设备(例如上网本或智能手机)上，这很快就会变得非常滞后。

<强>2。可用性 对于笔记本电脑和上网本，您很容易意外触摸触摸板，从而意外地将光标移动到一个全新的位置，这真的很烦人。

<强>3。支持 请注意，大多数触摸电脑(例如平板电脑和智能手机)将无法使用您的功能。

<强>4。使用情况 我想不出这个函数有什么用处。您唯一能赢得的就是用户端少了一次点击。考虑用户已经将光标移动到他想要编辑的特定位置。再按一根手指根本不费力。

也就是说，如果您出于某种原因仍然决定这样做，您所要做的就是获取 textarea 字段的每一行的行高。使用每个字符具有相同宽度的单色字体。获取文本区域字段的高度和宽度。获取滚动条不在顶部时textarea字段隐藏的部分。最后获取文本区域内的光标位置。根据所有这些数据，您可以计算字符串的索引，然后使用您链接的 jquery 函数，其中两个参数相同 $("textarea").selectRange(pos, pos);