获取光标在<输入>中的位置

Get position of the cursor in the <input>

本文关键字：位置 输入 光标 获取      更新时间：2023-09-26

我尝试查看许多关于如何在单击输入框时获取光标位置的堆栈溢出讨论（但许多讨论使用插入符号代替获取突出显示的位置） - 但似乎没有什么适合我非常简单的要求。

我想要的只是一个函数，当单击鼠标时，它将返回光标的位置（就开头的字符数而言） - 请注意，我所说的位置是指字符位置。

当您单击带有一些文本的可编辑输入框上的某处时，我想在单击后获取光标的位置（从开始的字符数） - 以便我可以记住这一点以供将来单击（对于某些特定的 UI 要求）。

有没有一个jQuery（或javascript）函数可以做？也欢迎任何解决方法。

谢谢

编辑-有些人将我引导到其他帖子 - 但请注意，我无法使用jQuery Caret或任何其他插件。 我得到的只是jQuery。

得到了解决方案 。尝试以下代码，并具有经过验证的结果-

<html>
<head>
<script>
    function f1(el) {
    var val = el.value;
    alert(val.slice(0, el.selectionStart).length);
}
</script>
</head>
<body>
<input type=text id=t1 value=abcd>
    <button onclick="f1(document.getElementById('t1'))">check position</button>
</body>
</html>

我给你fiddle_demo

假设 HTML：

<input id="target" />

以下代码为您提供鼠标光标的坐标：

$('#target').click(function(jqEvt){
    console.log('Coordinates within textbox', jqEvt.offsetX, jqEvt.offsetY);
    console.log('Global coordinates', jqEvt.clientX, jqEvt.clientY);
});

参见 jQuery.Event

把它放在一个<input type=image/>

当您使用 <input type=image/> 标记时，您告诉浏览器提交单击图像的 x 和 y 坐标。这允许您向表单添加图像映射类型功能。

相关文章：