当我们需要在前端实现一些特定功能时，有时候需要知道用户在输入框内的光标位置。例如在自动补全、实时搜索等功能中，我们需要知道光标所在的位置来确定操作的区域。
本文将介绍如何通过 JavaScript 在 HTML 输入框中获取光标位置。
获取光标位置的方法
在 HTML 中，可以使用 selectionStart 和 selectionEnd 属性来获取当前输入框中的光标位置。这两个属性分别表示用户选择文本的起始和结束位置。
以下是一个简单的示例代码：
------ ----------- ----------------- -------- ----- ---------- - --------------------------------------- ------------------------------------ -- -- - ----- ------------- - -------------------------- --------------------------- --- ---------
在这个示例中，我们首先获取输入框元素，并为其添加了一个点击事件监听器。当用户点击输入框时，我们会在控制台输出光标的位置。
深入理解光标位置的计算
虽然上述代码可以满足基本的需求，但并不完美。比如，如果用户使用鼠标或键盘粘贴文本时，输入框内的内容会改变，但光标的位置却没有更新。因此，我们需要更加深入地理解光标位置的计算方法。
在 HTML 中，输入框的值和光标位置是基于字符而不是像素计算的。例如，如果输入框中有 10 个字符，那么如果用户设置光标位置为 5，那么光标应该位于第五个字符之后。
当我们向输入框中添加或删除字符时，光标位置会自动更新。但如果我们需要手动获取光标位置，则需要考虑以下情况：
- 用户使用鼠标或键盘选择文本。
- 用户使用鼠标或键盘粘贴文本。
- 输入框中存在换行符等特殊字符。
在这些情况下，光标位置需要进行相应的调整。
下面是一个更复杂但更全面的示例代码：
--------- -------------------------
--------
----- -------- - ------------------------------------
-------- ------------------ -
--- ------------- - --
-- ------- ----------------------- --- -------- -- ------ --------------------- --- --------- -
-- --------------
----- --------------- - --------------------- - ------------------------
------------- - ----------------------- - ----------------
- ---- -- ------------------- -- ------------------------------- -
-- ---- --
----- ----- - ---------------------------------
-- --------
-- ---------------------- --- --------- -
-- --------------
----- --------------- - ------------------
---------------------------- ------------------------
------------- - ----------------- - ----------------
-
-
------ --------------
-
---------------------------------- -- -- -
----- ------------ - -------------------
-- ------------------------
-------------- - ----------------------------- ----
----- ------------- - -------------------
------------------ - -------------
---------------------------
---
---------在这个示例中，我们使用了 textarea 元素，并为其添加了一个输入事件监听器。当用户在输入框中输入字符时，我们会重新计算光标的位置，并输出到控制台。
注意，在这个示例中，我们不仅考虑了用户选择和粘贴文本的情况，还加入了对特殊字符（例如换行符）的处理。此外，我们还保留了对旧版 IE 的兼容性支持。
总结
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28081