텍스트 영역에서 커서 위치를 어떻게 얻습니까?

텍스트 영역에서 커서 위치를 어떻게 얻습니까?

---

텍스트 영역이 있고 JavaScript로 커서가있는 텍스트 영역의 마지막 줄 또는 텍스트 영역의 첫 번째 줄에 있는지 알고 싶습니다.

첫 개행 문자와 마지막 개행 문자의 위치를 ​​잡고 커서의 위치를 ​​잡고 생각했습니다.

var firstNewline = $('#myTextarea').val().indexOf('\n');
var lastNewline = $('#myTextarea').val().lastIndexOf('\n');

var cursorPosition = ?????;

if (cursorPosition < firstNewline)
    // I am on first line.
else if (cursorPosition > lastNewline)
    // I am on last line.

• 텍스트 영역 내에서 커서 위치를 잡을 수 있습니까?
• 내가 텍스트 영역의 첫 번째 줄에 있는지 마지막 줄에 있는지 알아 내기위한 더 나은 제안이 있습니까?

JavaScript가 단순하거나 단순하지 않는 한 jQuery 솔루션이 선호됩니다.

---

선택이없는 경우에는 속성을 사용할 수 있습니다 .selectionStart또는 .selectionEnd(선택 사항 없음으로 그들은 동등한 것).

var cursorPosition = $('#myTextarea').prop("selectionStart");

이는 이전 브라우저, 특히 IE8-에서는 지원되지 않습니다. 거기에서 텍스트 범위로 작업해야하지만 완전히 실망 스럽습니다.

그래도 입력 요소에서 선택 / 커서 위치를 가져오고 설정하는 데 전념하는 라이브러리가 있다고 생각합니다. 이름은 기억 나지 않지만이 주제에 대한 기사가 수십 개있는 것 같습니다.

---

나는 이것에 대해 상당한 양의 작업을 수행했으며 Stack Overflow의 텍스트 영역에서 캐럿 / 선택 위치를 얻는 기능을 여러 번 게시했습니다. 이 작업을 수행하는 거의 모든 다른 코드와 달리 IE <9에서는 줄 바꿈이 제대로 작동합니다.

다음은 몇 가지 배경 지식을 가진 예제 질문입니다.

selectionStart 및 selectionEnd에 대한 Internet Explorer 승인 대체품이 있습니까?

다음은이 함수 및 기타 선택 관련 텍스트 영역 함수를 포함하는 내가 작성한 jQuery 플러그인에 대한 링크입니다.

https://github.com/timdown/rangyinputs

---

내 표준 라이브러리에있는 크로스 브라우저 기능은 다음과 같습니다.

function getCursorPos(input) {
    if ("selectionStart" in input && document.activeElement == input) {
        return {
            start: input.selectionStart,
            end: input.selectionEnd
        };
    }
    else if (input.createTextRange) {
        var sel = document.selection.createRange();
        if (sel.parentElement() === input) {
            var rng = input.createTextRange();
            rng.moveToBookmark(sel.getBookmark());
            for (var len = 0;
                     rng.compareEndPoints("EndToStart", rng) > 0;
                     rng.moveEnd("character", -1)) {
                len++;
            }
            rng.setEndPoint("StartToStart", input.createTextRange());
            for (var pos = { start: 0, end: len };
                     rng.compareEndPoints("EndToStart", rng) > 0;
                     rng.moveEnd("character", -1)) {
                pos.start++;
                pos.end++;
            }
            return pos;
        }
    }
    return -1;
}

다음과 같이 코드에서 사용하십시오.

var cursorPosition = getCursorPos($('#myTextarea')[0])

보완 기능은 다음과 같습니다.

function setCursorPos(input, start, end) {
    if (arguments.length < 3) end = start;
    if ("selectionStart" in input) {
        setTimeout(function() {
            input.selectionStart = start;
            input.selectionEnd = end;
        }, 1);
    }
    else if (input.createTextRange) {
        var rng = input.createTextRange();
        rng.moveStart("character", start);
        rng.collapse();
        rng.moveEnd("character", end - start);
        rng.select();
    }
}

http://jsfiddle.net/gilly3/6SUN8/

---

다음은 줄 번호와 열 위치를 얻는 코드입니다.

function getLineNumber(tArea) {

    return tArea.value.substr(0, tArea.selectionStart).split("\n").length;
}

function getCursorPos() {
    var me = $("textarea[name='documenttext']")[0];
    var el = $(me).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;
    }
    var ret = pos - prevLine(me);
    alert(ret);

    return ret; 
}

function prevLine(me) {
    var lineArr = me.value.substr(0, me.selectionStart).split("\n");

    var numChars = 0;

    for (var i = 0; i < lineArr.length-1; i++) {
        numChars += lineArr[i].length+1;
    }

    return numChars;
}

tArea는 텍스트 영역 DOM 요소입니다.

---

getCursorPos () 함수는 GWT에서 커서 위치를 반환합니다.

    TextArea content = new TextArea();
    content.getCursorPos();

참고 URL : https://stackoverflow.com/questions/7745867/how-do-you-get-the-cursor-position-in-a-textarea