Как получить позицию курсора в текстовом поле?

У меня есть текстовое поле, и я хотел бы знать, есть ли я в последней строке в текстовом поле или в первой строке в текстовом поле с моим курсором с 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.

Можно ли захватить позицию курсора в текстовом поле?
Есть ли у вас лучшее предложение узнать, находится ли я на первой или последней строке текстового поля?

Решения jQuery предпочтительнее, если javascript не является простым или простым.

Любая помощь очень ценится.

Ответы

Ответ 1

Если выбора нет, вы можете использовать свойства .selectionStart или .selectionEnd (без выбора они равны).

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

Обратите внимание, что это не поддерживается в старых браузерах, особенно IE8-. Там вам придется работать с текстовыми диапазонами, но это полное разочарование.

Я считаю, что есть библиотека где-то, которая посвящена получению и настройке выбора/позиции курсора в элементах ввода. Я не могу вспомнить его имя, но, похоже, на статьи по этому вопросу есть десятки.

Ответ 2

Я проделал большую работу над этим и разместил функцию для того, чтобы несколько раз занять позицию каретки/выбора в текстовых средах в Stack Overflow. В отличие от почти любого другого кода, чтобы сделать это там, он работает правильно с разрывами строк в IE < 9.

Вот примерный вопрос с некоторым фоном:

Есть ли одобренная Internet Explorer замена selectStart и selectionEnd?

И вот ссылка на подключаемый модуль jQuery, который я написал, который включает эту функцию и другие связанные с выбором функции textarea:

https://github.com/timdown/rangyinputs

Ответ 3

Здесь функция кросс-браузера, которую я имею в своей стандартной библиотеке:

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/

Ответ 4

Вот код для получения номера строки и позиции столбца

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 текстовой области

Ответ 5

Функция getCursorPos() вернет позицию курсора в GWT

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