文本区域中的光标位置（字符索引，不是 x/y 坐标）

Posted 2023-05-08

【中文标题】文本区域中的光标位置（字符索引，不是 x/y 坐标）

【英文标题】：Cursor position in a textarea (character index, not x/y coordinates)

【发布时间】：2010-12-25 20:59:32

【问题描述】：

如何使用 jQuery 获取插入符号在文本区域中的位置？我正在寻找光标与文本开头的偏移量，而不是the (x, y) position。

【问题讨论】：

您是否需要知道框中有多少个字符或光标在正文中的位置？前者是可能的，后者是（可能）不是。

光标在文本中的位置

【参考方案1】：

不是 jQuery，而只是 javascript...

var position = window.getSelection().getRangeAt(0).startOffset;

【参考方案2】：

function caretPos(el)

    var pos = 0;
    // IE Support
    if (document.selection) 
    
        el.focus ();
        var Sel = document.selection.createRange();
        var SelLength = document.selection.createRange().text.length;
        Sel.moveStart ('character', -el.value.length);
        pos = Sel.text.length - SelLength;
    
    // Firefox support
    else if (el.selectionStart || el.selectionStart == '0')
        pos = el.selectionStart;

    return pos;

【讨论】：

我在 FF 中尝试过你的功能，但它不起作用，无论我得到什么 0

同样在最新的 chrome 中，它总是返回 0

【参考方案3】：

修改了 BojanG 的解决方案以使用 jQuery。在 Chrome、FF 和 IE 中测试。

(function ($, undefined) 
    $.fn.getCursorPosition = function() 
        var el = $(this).get(0);
        var pos = 0;
        if('selectionStart' in el) 
            pos = el.selectionStart;
         else if('selection' in document) 
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        
        return pos;
    
)(jQuery);

基本上，要在文本框上使用它，请执行以下操作：

$("#myTextBoxSelector").getCursorPosition();

【讨论】：

在输入中输入文本。开始按左箭头，当光标位于第一个字符之前时，我得到1。如果我再次按左键，我会得到一个0，但光标仍然存在（在输入元素的最左侧）。介意有人解释一下这种行为吗？

按退格键时，计数会增加。它应该会减少。

【参考方案4】：

这也适用于 IE9、Firefox 和 Chrome：

(function ($, undefined) 
    $.fn.getCursorPosition = function() 
        var el = $(this).get(0);
        var pos = 0;
        if('selectionStart' in el) 
            pos = el.selectionStart;
         else if('selection' in document) 
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        
        return pos;
    
)(jQuery);

而且我认为它比 Ryan 的版本干净得多

【讨论】：

这段代码中undefined参数的作用是什么？

在这段代码中它没有目的。但总的来说，这就是您将 undefined 重置为 undefined 的方式。这很疯狂，但在 ECMAScript3 中，变量“未定义”可以重新分配给其他值。因此，如果您的代码依赖于未定义未定义，则应将变量正确重置为未定义。上述方法是这样做的最佳做法。

@MaximilianRuta 你为什么将你的代码插入到别人的答案中？

@h4b0 我的头。查看瑞恩的回答

【参考方案5】：

我使用jQuery masked input plug 做了一些工作，发现插入符号功能非常有用。我已经从上面的插件中提取了这段代码..

$.fn.caret = function (begin, end)
    
        if (this.length == 0) return;
        if (typeof begin == 'number')
        
            end = (typeof end == 'number') ? end : begin;
            return this.each(function ()
            
                if (this.setSelectionRange)
                
                    this.setSelectionRange(begin, end);
                 else if (this.createTextRange)
                
                    var range = this.createTextRange();
                    range.collapse(true);
                    range.moveEnd('character', end);
                    range.moveStart('character', begin);
                    try  range.select();  catch (ex)  
                
            );
         else
        
            if (this[0].setSelectionRange)
            
                begin = this[0].selectionStart;
                end = this[0].selectionEnd;
             else if (document.selection && document.selection.createRange)
            
                var range = document.selection.createRange();
                begin = 0 - range.duplicate().moveStart('character', -100000);
                end = begin + range.text.length;
            
            return  begin: begin, end: end ;
        
    

创建函数后，您可以执行以下操作。再一次，这个函数是从上面提到的 jQuery 屏蔽输入函数中提取出来的。

$("#id").caret(); //get the begin/end caret position
$("#id").caret().begin;
$("#id").caret().end;
$("#otherId").caret(5); //set the caret position by index
$("#otherId").caret(1, 5); //select a range

【参考方案6】：

function doGetCaretPosition(ctrl) 
    var CaretPos = 0; // IE Support
    if (document.selection) 
        ctrl.focus();
        var Sel = document.selection.createRange();
        Sel.moveStart('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0')
        CaretPos = ctrl.selectionStart;
    return (CaretPos);

【参考方案7】：

使用 jquery 最简单的方法：

  var cursorPos= $("#txtarea").prop('selectionStart');

我正在使用此代码为我的项目创建一个简单的快速链接选项/文本编辑器。

【讨论】：

这很好用——而且非常简单。应该是正确答案。