Получить позицию курсора (в символах) в текстовом поле ввода

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

Я нашел несколько фрагментов через Google, но ничего не доказал.

В принципе что-то вроде плагина jQuery было бы идеальным, поэтому я мог просто сделать

$("#myinput").caretPosition()

Ответ 1

Более простое обновление:

Используйте пример field.selectionStart в этом ответе.

Спасибо @commonSenseCode за указание на это.

Старый ответ:

Нашел это решение. Не на основе jquery, но нет проблем с интеграцией в jquery:

/*
** Returns the caret (cursor) position of the specified text field.
** Return value range is 0-oField.value.length.
*/
function doGetCaretPosition (oField) {

  // Initialize
  var iCaretPos = 0;

  // IE Support
  if (document.selection) {

    // Set focus on the element
    oField.focus();

    // To get cursor position, get empty selection range
    var oSel = document.selection.createRange();

    // Move selection start to 0 position
    oSel.moveStart('character', -oField.value.length);

    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }

  // Firefox support
  else if (oField.selectionStart || oField.selectionStart == '0')
    iCaretPos = oField.selectionDirection=='backward' ? oField.selectionStart : oField.selectionEnd;

  // Return results
  return iCaretPos;
}

Ответ 2

Хороший, большой благодаря Макс.

Я включил функциональность в свой ответ в jQuery, если кто-то хочет ее использовать.

(function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }
})(jQuery);

Ответ 3

ОЧЕНЬ ПРОСТО

Обновленный ответ

Используйте selectionStart, он совместим со всеми основными браузерами.

document.getElementById('foobar').addEventListener('keyup', e => {
  console.log('Caret at: ', e.target.selectionStart)
})

<input id="foobar" />

Ответ 4

Получено очень простое решение. Попробуйте следующий код с подтвержденным результатом -

<html>
<head>
<script>
    function f1(el) {
    var val = el.value;
    alert(val.slice(0, el.selectionStart).length);
}
</script>
</head>
<body>
<input type=text id=t1 value=abcd>
    <button onclick="f1(document.getElementById('t1'))">check position</button>
</body>
</html>

Я даю вам fiddle_demo

Ответ 5

   (function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if (document.selection) {
            // IE
           input.focus();
        }
        return 'selectionStart' in input ? input.selectionStart:'' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
     }
   })(jQuery);

Ответ 6

Теперь для этого есть хороший плагин: Плагин Caret

Затем вы можете получить позицию с помощью $("#myTextBox").caret() или установить ее с помощью $("#myTextBox").caret(position)

Ответ 7

Здесь есть несколько хороших ответов, но я думаю, вы можете упростить свой код и пропустить проверку поддержки inputElement.selectionStart: он не поддерживается только в IE8 и ранее (см. документация), которая составляет менее 1% от текущего использования браузера.

var input = document.getElementById('myinput'); // or $('#myinput')[0]
var caretPos = input.selectionStart;

// and if you want to know if there is a selection or not inside your input:

if (input.selectionStart != input.selectionEnd)
{
    var selectionValue =
    input.value.substring(input.selectionStart, input.selectionEnd);
}

Ответ 8

Возможно, вам нужен выбранный диапазон в дополнение к позиции курсора. Вот простая функция, вам даже не нужен jQuery:

function caretPosition(input) {
    var start = input[0].selectionStart,
        end = input[0].selectionEnd,
        diff = end - start;

    if (start >= 0 && start == end) {
        // do cursor position actions, example:
        console.log('Cursor Position: ' + start);
    } else if (start >= 0) {
        // do ranged select actions, example:
        console.log('Cursor Position: ' + start + ' to ' + end + ' (' + diff + ' selected chars)');
    }
}

Скажем, вы хотите называть его на входе всякий раз, когда он изменяется, или мышь перемещает позицию курсора (в этом случае мы используем jQuery .on()). По соображениям производительности может быть хорошей идеей добавить setTimeout() или что-то вроде Underscores _debounce(), если события заливаются:

$('input[type="text"]').on('keyup mouseup mouseleave', function() {
    caretPosition($(this));
});

Вот скрипка, если вы хотите попробовать: https://jsfiddle.net/Dhaupin/91189tq7/