获取文本输入域中的光标位置(以字符为单位)

我怎样才能从输入域中得到插入符号的位置?

我通过谷歌找到了一些碎片，但没有子弹。

基本上像一个jQuery插件将是理想的，所以我可以简单地做

$("#myinput").caretPosition()

当前回答

解决方案是.selectionStart:

var input = document.getElementById('yourINPUTid');
input.selectionEnd = input.selectionStart = yourDESIREDposition;
input.focus();

如果. selectionend没有被分配，一些文本(S—>E)将被选择。

当焦点丢失时需要.focus();当你触发你的代码(onClick)。

我只在Chrome上测试了这个功能。

如果你想要更复杂的答案，你必须阅读其他答案。

2021-03-16 02:15:51

其他回答

也许除了光标位置之外，您还需要一个选定的范围。这是一个简单的函数，你甚至不需要jQuery:

function caretPosition(input) {
    var start = input[0].selectionStart,
        end = input[0].selectionEnd,
        diff = end - start;

    if (start >= 0 && start == end) {
        // do cursor position actions, example:
        console.log('Cursor Position: ' + start);
    } else if (start >= 0) {
        // do ranged select actions, example:
        console.log('Cursor Position: ' + start + ' to ' + end + ' (' + diff + ' selected chars)');
    }
}

假设你想在输入改变或鼠标移动光标位置时调用它(在这种情况下，我们使用jQuery .on())。出于性能考虑，如果事件大量涌入，添加setTimeout()或下划线_debounce()之类的东西可能是个好主意:

$('input[type="text"]').on('keyup mouseup mouseleave', function() {
    caretPosition($(this));
});

这里有一个小提琴，如果你想尝试一下:https://jsfiddle.net/Dhaupin/91189tq7/

2016-09-29 20:37:33

有一个很简单的解决办法。尝试以下代码的验证结果-

<html>
<head>
<script>
    function f1(el) {
    var val = el.value;
    alert(val.slice(0, el.selectionStart).length);
}
</script>
</head>
<body>
<input type=text id=t1 value=abcd>
    <button onclick="f1(document.getElementById('t1'))">check position</button>
</body>
</html>

我给你们fiddle_demo

2013-09-19 19:38:31

   (function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if (document.selection) {
            // IE
           input.focus();
        }
        return 'selectionStart' in input ? input.selectionStart:'' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
     }
   })(jQuery);

2012-09-02 21:19:46

现在有一个很好的插件:插入插件

然后你可以得到的位置使用$("#myTextBox").caret()或设置它通过$("#myTextBox").caret(位置)

2014-01-29 10:28:40