在前端开发中，我们经常需要在用户输入框或文本区域的光标处插入一些动态生成的文本。本篇文章将介绍如何使用JavaScript / jQuery在光标位置插入文本，并且提供详细的代码示例和指导意义。
使用JavaScript实现光标插入文本
在JavaScript中，我们可以通过DOM API来找到当前光标所在位置，并在其前面或后面插入需要的文本。下面是一个典型的实现方式：
-- -------------------- ---- -------
-------- ------------------------ -
----- ------- - -----------------------
----- -------------- - -----------------------
----- ------------ - ---------------------
----- ----- - --------------
----- -------- -
------------------ --------------- -
---- -
----------------------------- --------------
------------- - ---------
---------------------- - -------------- - ------------
-------------------- - ------------ - ------------
-这个函数接收一个参数text作为要插入的文本内容。首先，我们获取当前光标所在的输入框或文本区域元素，然后获取它的值、光标起始位置和光标结束位置。
使用substring()方法拼接出新的字符串，然后将新的字符串赋值给元素的value属性。然后，我们将光标移动到插入文本的结尾处，以便用户可以继续输入。这里使用了selectionStart和selectionEnd属性来实现光标的移动。
下面是一个调用示例：
<input type="text" id="myInput" />
<script>
const input = document.getElementById('myInput');
input.addEventListener('click', () => {
insertTextAtCursor('hello world');
});
</script>在页面中添加一个文本框，并绑定点击事件。点击文本框后，将会在光标位置插入“hello world”文本。
使用jQuery实现光标插入文本
如果你正在使用jQuery，那么可以使用jQuery封装的方法来实现光标插入文本。下面是一个常见的实现方式：
-- -------------------- ---- -------
------------------ - -------- ------ -
------ ------------------ -- -
----- ------- - -----
-- -------------------- -
-- --- --
----------------
----- ----- - ---------------------------------
---------- - -----
---------------
- ---- -- ----------------------- -- ---------------------- -- ---- -
-- --- ----- --------
----- -------------- - -----------------------
----- ------------ - ---------------------
------------- -
-------------------------- --------------- -
---- -
------------------------------------- ----------------------
---------------------- - -------------- - ------------
-------------------- - ------------ - ------------
- ---- -
------------- -- -----
-
---
--这个函数定义在$.fn对象上，表示它是一个jQuery插件方法。该方法接收一个参数text作为要插入的文本，然后遍历所有匹配元素并执行插入文本操作。
如果浏览器是IE，我们使用document.selection API来获取光标位置，并使用createRange()方法创建一个范围对象。然后，我们将要插入的文本赋值给这个范围对象的text属性，并通过select()方法将光标移动到文本末尾。
如果浏览器不是IE，则可以直接获取输入框或文本区域的selectionStart和selectionEnd属性来实现光标的移动。
下面是一个调用示例：
<input type="text" id="myInput2" />
<script>
const input2 = $('#myInput2');
input2.on('click', () => {
input2.insertAtCaret('hello world');
});
</script>在页面中添加一个文本框，并绑定点击
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9969
