在前端开发中，文本输入框是一个经常使用的元素。当用户输入文本时，我们通常需要知道他们光标（插入符）在哪里，以便进行一些操作或显示相关信息。
本文将深入讨论如何使用 JavaScript 获取并操作文本框中插入符的位置，并提供实用的示例代码和指导意义。
插入符的位置
在文本输入框中，插入符代表当前输入的位置。例如，如果用户在输入框中输入“Hello World”，并在第 6 个字符后停止输入，则插入符的位置为 6。
要获取文本框中插入符的位置，我们可以使用 selectionStart 属性。此属性返回当前选定文本区域的开始点的索引（即，当前选择的文本的起始位置），如果没有选择文本，则返回插入符的位置。同样，selectionEnd 属性返回当前选定文本区域的结束点的索引。
下面是一个例子，展示如何使用这些属性来获取插入符的位置：
-- -------------------- ---- ------- ------ ----------- ------------- -------- ----- ------------ - ----------------------------------- -------------------------------------- -- -- - ----- ------------- - ---------------------------- ------------------ --------- ------------------- --- ---------
在上面的代码中，我们创建了一个文本输入框，并监听其 keyup 事件。每次用户松开键盘时，我们都会获取插入符的位置，并将其输出到控制台。这样，我们就能够实时了解到文本输入框中插入符的位置。
操作插入符的位置
除了获取插入符的位置外，我们还可以使用 JavaScript 来操作它。例如，我们可以将插入符移动到特定的位置，或者在插入符所在的位置插入新的文本。
移动插入符
要将插入符移动到指定的位置，我们可以使用 setSelectionRange() 方法。该方法需要两个参数：起始位置和结束位置。如果这两个参数相同，则表示将插入符移动到指定位置。下面是一个例子：
<input type="text" id="myInput">
<script>
const inputElement = document.getElementById("myInput");
// 移动插入符到第 3 个字符后
inputElement.setSelectionRange(3, 3);
</script>在上面的代码中，我们使用 setSelectionRange() 方法将插入符移动到第 3 个字符后。
插入文本
要在插入符所在的位置插入新的文本，我们可以使用 value 属性和 slice() 方法。具体步骤如下：
- 获取当前文本框中的文本。
- 将要插入的文本插入到当前文本的插入符位置（即，末尾）。
- 将插入后的文本设置回
value属性。
下面是一个例子，展示如何使用这种方法在插入符位置插入新的文本：
-- -------------------- ---- -------
------ ----------- -------------
--------
----- ------------ - -----------------------------------
---------------------------------------- ------- -- -
-- --------------- ------
-- ---------- --- -------- -
----- ------------ - -------------------
----- ------------- - ----------------------------
----- -------- - --------------------- -------------- - ------ - ----------------------------------
------------------ - ---------
-- --------------
----- ---------------- - ------------- - --
------------------------------------------------ ------------------
-
---
---------在上面的代码中，我们监听了文本框的 `
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25752