Как вы получаете положение курсора в текстовом поле?

Question

Как вы получаете положение курсора в текстовом поле?

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

651 3

jQuery javascript html input textarea

3 ответов:

Comments

Ничего не найдено.

pimvdb · Accepted Answer · 2011-10-12 23:11:18

Если нет выбора, вы можете использовать свойства .selectionStart или .selectionEnd (без выбора они равны).
var cursorPosition = $('#myTextarea').prop("selectionStart");
обратите внимание, что это не поддерживается в старых браузерах, особенно в браузерах IE8-. Там вам придется работать с текстовыми диапазонами, но это полное разочарование.

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

Tim Down · Accepted Answer · 2017-10-20 22:50:16

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

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

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

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

https://github.com/timdown/rangyinputs

gilly3 · Accepted Answer · 2012-05-23 02:31:49

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

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/