js 设置div光标位置

在 JavaScript 中设置 div 元素的光标（插入点）位置，通常需要使用 Range 和 Selection 对象来实现。以下是基础概念、优势、应用场景以及具体的实现方法：

基础概念

Range：表示文档中的一个范围，可以用来选择或操作文档的一部分。
Selection：表示用户在文档中选择的文本，或者程序设置的文本选择。

优势

可以精确控制用户在页面上的光标位置。
在实现富文本编辑器、自动填充表单等功能时非常有用。

应用场景

富文本编辑器中，用户点击某个位置后光标跳转到该位置。
自动填充表单时，将光标定位到特定输入框的末尾。
在聊天应用中，自动将光标定位到消息输入框的末尾。

实现方法

以下是一个示例代码，展示如何在 div 元素中设置光标位置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set Cursor Position in Div</title>
    <style>
        #editableDiv {
            border: 1px solid black;
            padding: 10px;
            min-height: 50px;
            outline: none;
        }
    </style>
</head>
<body>
    <div id="editableDiv" contenteditable="true">This is a editable div.</div>
    <button onclick="setCursorPosition(5)">Set Cursor Position to 5</button>

    <script>
        function setCursorPosition(position) {
            const div = document.getElementById('editableDiv');
            const range = document.createRange();
            const selection = window.getSelection();

            // 设置 Range 的起始和结束位置
            range.setStart(div.firstChild, position);
            range.setEnd(div.firstChild, position);

            // 清除当前选择并添加新的 Range
            selection.removeAllRanges();
            selection.addRange(range);
        }
    </script>
</body>
</html>

解释

HTML 部分：
- 创建一个 div 元素，并设置 contenteditable="true" 使其可编辑。
- 创建一个按钮，点击按钮时调用 setCursorPosition 函数，并传入光标位置参数。

JavaScript 部分：
- setCursorPosition 函数接收一个位置参数。
- 使用 document.createRange() 创建一个新的 Range 对象。
- 使用 window.getSelection() 获取当前的 Selection 对象。
- 使用 range.setStart 和 range.setEnd 设置 Range 的起始和结束位置。
- 清除当前选择并添加新的 Range，从而设置光标位置。