JavaScript 如何设置光标位置

在网页开发中，设置光标位置是一个常见的需求。无论是在文本输入框中让光标自动定位到特定位置，还是在富文本编辑场景下精准控制光标，JavaScript 都提供了相应的方法来实现。

对于普通的文本输入框（<input> 或 <textarea>），可以使用 selectionStart 和 selectionEnd 属性。例如，有一个 ID 为 “inputBox” 的文本输入框，要将光标设置到第 5 个字符的位置，可以这样做：

const inputBox = document.getElementById('inputBox');
inputBox.selectionStart = 5;
inputBox.selectionEnd = 5;

这里 selectionStart 和 selectionEnd 设置为相同的值，就可以将光标定位在指定位置。如果想选中一段文本，比如从第 3 个字符到第 8 个字符，只需将 selectionStart 设置为 3，selectionEnd 设置为 8 即可。

在富文本编辑区域（例如使用 <div contenteditable="true"> 创建的可编辑区域），设置光标位置相对复杂一些。首先需要创建一个 Range 对象和 Selection 对象。以下是一个简单的示例：

const editableDiv = document.querySelector('[contenteditable="true"]');
const range = document.createRange();
const selection = window.getSelection();

range.setStart(editableDiv.childNodes[0], 5);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);

在上述代码中，range.setStart() 方法用于设置 Range 的起始位置，这里是可编辑区域第一个子节点的第 5 个字符位置。range.collapse(true) 将 Range 折叠到起始位置，这样就相当于把光标定位到了指定位置。然后通过 selection 对象移除所有现有的 Range，并添加新创建的 Range，从而实现将光标设置到富文本编辑区域的指定位置。

了解 JavaScript 如何设置光标位置，能极大提升用户在网页上的输入体验。通过精准控制光标，用户无需手动去定位，提高了操作效率。在实现一些复杂的交互功能，如文本自动填充、特定位置插入内容等方面，设置光标位置也是关键的一步。无论是简单的表单输入，还是复杂的富文本编辑应用，掌握这些技巧都能让开发更加得心应手。