텍스트 영역의 커서 위치 (x / y 좌표가 아닌 문자 인덱스)

텍스트 영역의 커서 위치 (x / y 좌표가 아닌 문자 인덱스)

---

jQuery를 사용하여 텍스트 영역에서 캐럿의 위치를 ​​어떻게 얻을 수 있습니까? (x, y) 위치가 아니라 텍스트 시작 부분에서 커서의 오프셋을 찾고 있습니다.

---

jQuery가 아니라 Javascript ...

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

---

jQuery와 함께 작동하도록 BojanG의 솔루션을 수정했습니다. 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();

---

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;

}

---

이 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

---

jquery로 수행하는 가장 쉬운 방법 :

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

I am using this code to create a simple quicklink option/texteditor for my project.

---

This works also in IE9, Firefox and 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);

And i think it is a lot more clean then the version of Ryan

---

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);
}

ReferenceURL : https://stackoverflow.com/questions/1891444/cursor-position-in-a-textarea-character-index-not-x-y-coordinates