js输入框光标位置

在JavaScript中，输入框（<input> 或 <textarea>）的光标位置通常指的是用户在文本框中输入或选择文本时，光标所在的位置。这个位置可以通过 selectionStart 和 selectionEnd 属性来获取或设置。

基础概念

selectionStart: 返回一个表示所选文本起始位置的索引（从0开始）。如果没有选中任何文本，则 selectionStart 和 selectionEnd 的值相同，且等于光标的位置。
selectionEnd: 返回一个表示所选文本结束位置的索引（从0开始）。如果没有选中任何文本，则与 selectionStart 相同。

获取光标位置

const input = document.getElementById('myInput');
const cursorPosition = input.selectionStart;
console.log(cursorPosition);

设置光标位置

const input = document.getElementById('myInput');
input.focus();
input.setSelectionRange(position, position);

应用场景

自动补全: 当用户在输入框中输入时，可以根据光标位置提供自动补全建议。
文本高亮: 可以根据光标位置高亮显示某些文本。
插入文本: 在特定位置插入文本，例如在光标位置插入表情符号或链接。

常见问题及解决方法

问题：在某些浏览器中，`selectionStart` 和 `selectionEnd` 不工作

原因: 不同浏览器对 selectionStart 和 selectionEnd 的支持程度不同，尤其是在较旧的浏览器中。

解决方法: 使用特性检测来确保兼容性，并为不支持的浏览器提供替代方案。

function getCursorPosition(input) {
    if (typeof input.selectionStart === "number") {
        return input.selectionStart;
    } else if (document.selection) { // For IE <= 8
        input.focus();
        const range = document.selection.createRange();
        const range_all = input.createTextRange();
        let i = 0;
        while (range_all.moveStart('character', -i) && range.compareEndPoints("StartToStart", range_all) < 0) {
            i++;
        }
        return i;
    }
    return 0;
}

问题：在输入框中插入文本后，光标位置不正确

原因: 在插入文本后，输入框的内容发生了变化，但光标位置没有相应更新。

解决方法: 在插入文本后，重新设置光标位置。

function insertTextAtCursor(input, text) {
    const start = input.selectionStart;
    const end = input.selectionEnd;
    const value = input.value;
    input.value = value.substring(0, start) + text + value.substring(end);
    input.selectionStart = input.selectionEnd = start + text.length;
}

示例代码

以下是一个完整的示例，展示了如何获取和设置光标位置，并在光标位置插入文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cursor Position Example</title>
</head>
<body>
    <input type="text" id="myInput" value="Hello World">
    <button onclick="insertAtCursor('!!!')">Insert !!!</button>

    <script>
        function getCursorPosition(input) {
            if (typeof input.selectionStart === "number") {
                return input.selectionStart;
            } else if (document.selection) { // For IE <= 8
                input.focus();
                const range = document.selection.createRange();
                const range_all = input.createTextRange();
                let i = 0;
                while (range_all.moveStart('character', -i) && range.compareEndPoints("StartToStart", range_all) < 0) {
                    i++;
                }
                return i;
            }
            return 0;
        }

        function insertAtCursor(text) {
            const input = document.getElementById('myInput');
            const start = getCursorPosition(input);
            const value = input.value;
            input.value = value.substring(0, start) + text + value.substring(start);
            input.selectionStart = input.selectionEnd = start + text.length;
        }
    </script>
</body>
</html>

这个示例中，点击按钮会在当前光标位置插入 "!!!"，并且光标会移动到插入文本的末尾。