在前端开发中，我们经常会需要在文本输入框或富文本编辑器中设置光标的位置。这个需求可以通过以下两种方式实现：使用原生的 DOM API 或依赖第三方库。
使用原生 DOM API
在原生的 DOM API 中，我们可以使用 setSelectionRange() 方法来设置文本输入框或富文本编辑器的光标位置。该方法接受两个参数，分别是要设置的光标的起始位置和结束位置。例如：
const input = document.getElementById('my-input');
input.setSelectionRange(2, 4); // 将光标设置到第 2 个字符后，选中到第 4 个字符需要注意的是，setSelectionRange() 方法只适用于 type 为 text、search、URL 或 textarea 的元素。对于其他类型的元素，可以使用 contentEditable 属性来将其变为可编辑元素，从而使用 setSelectionRange() 来设置光标位置。
使用第三方库
除了原生的 DOM API，我们还可以使用一些优秀的第三方库来帮助我们实现更加灵活和高效的光标位置设置。以下是其中两个常用的库：
1. Caret.js
Caret.js 是一个轻量级的 JavaScript 库，它提供了一些方便的 API 来操作光标位置。该库可以用于任何可编辑的元素，包括 input、textarea 和富文本编辑器等。
使用 Caret.js 设置光标位置非常简单，只需要调用 setPos() 方法，并传入要设置的光标位置即可。例如：
const input = document.getElementById('my-input');
caret.setPos(input, 2); // 将光标设置到第 2 个字符后2. Quill.js
Quill.js 是一个功能强大的富文本编辑器库，它支持在富文本编辑器中设置光标位置、插入图片、表格等功能。通过 Quill.js，我们可以快速搭建出一个复杂的富文本编辑器。
使用 Quill.js 设置光标位置也非常简单，只需要调用 setSelection() 方法，并传入要设置的光标位置即可。例如：
const quill = new Quill('#editor', {
theme: 'snow'
});
quill.setSelection(2, 4); // 将光标设置到第 2 个字符后，选中到第 4 个字符总结
在前端开发中，设置文本输入框或富文本编辑器的光标位置是一个非常常见的需求。我们可以使用原生的 DOM API 或依赖第三方库来实现这个需求。无论是哪种方式，都需要我们深入理解文本编辑器和光标的相关知识，才能写出稳定和高效的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8262
