textarea中的光标位置(字符索引,而不是x/y坐标)

Question

如何使用jQuery在textarea中获得插入符号的位置？我正在寻找光标从文本开头的偏移,而不是(x,y)位置.

Answer 1

修改了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();

Answer 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;

}

Answer 3

我已经使用这个jQuery蒙版输入插件完成了一些工作,发现插入符函数非常有用.我从上面的插件中提取了这段代码..

$.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

Answer 4

不是jQuery,而只是Javascript ......

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

Answer 5

使用jquery的最简单方法：

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

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

Answer 6

这也适用于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的版本要干净得多