Как получить пиксельные координаты (x, y) курсора в текстовых полях?

Question

Я использую jQuery и пытаюсь найти кросс-браузерный способ получить пиксельные координаты каретки в <textarea>песок input коробки, чтобы я мог разместить абсолютно позиционированный элемент div вокруг этого места.

Есть ли какой-нибудь плагин jQuery?Или фрагмент JavaScript, чтобы сделать именно это?

Answer 1

Я искал плагин координат курсора текстовой области для метеор-автозаполнение, поэтому я оценил все 8 плагинов на GitHub.Победителем, безусловно, является textarea-caret-position от Компонент.

Функции

• точность пикселей
• никаких зависимостей нет
• совместимость браузера:Chrome, Safari, Firefox (несмотря на два ошибки есть), IE9+;может работать, но не проверено в Opera, IE8 или старше
• поддерживает любое семейство и размер шрифтов, а также преобразование текста
• текстовая область может иметь произвольные отступы или границы
• не путать горизонтальные или вертикальные полосы прокрутки в текстовой области
• поддерживает жесткий возврат, табуляцию (кроме IE) и последовательные пробелы в тексте
• правильное положение строк длиннее столбцов в текстовой области
• нет «призрачная» позиция в пустом пространстве в конце строки при переносе длинных слов

Вот демо - http://jsfiddle.net/dandv/aFPA7/

Как это работает

Зеркало <div> создается за кадром и стилизован точно так же, как <textarea>.Затем текст текстовой области до курсора копируется в элемент div и <span> вставляется сразу после него.Затем текстовое содержимое диапазона устанавливается равным остатку текста в текстовой области, чтобы точно воспроизвести перенос в искусственном элементе div.

Это единственный метод, который гарантированно обрабатывает все крайние случаи, связанные с переносом длинных строк.Он также используется GitHub для определения положения своего @ раскрывающийся список пользователей.

Answer 2

Примечание:этот ответ описывает, как получить координаты персонажа текстового курсора/каретки.Чтобы найти координаты пикселей, вам нужно будет расширить это дальше.

Первое, что нужно запомнить, это то, что курсор может находиться в трех состояниях.

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

Модель IE использует объект документ.выбор, отсюда мы можем получить Текстдиапазон объект, который дает нам доступ к выделению и, следовательно, к положению(ям) курсора.

Модель FF/Opera использует удобные переменные [input].selectionStart иselectionEnd.

Обе модели представляют собой обычный курсор в виде выделения нулевой ширины, где левая граница является позицией курсора.

Если поле ввода не имеет фокуса, вы можете обнаружить, что он не установлен.Мне удалось успешно использовать следующий код для вставки фрагмента текста в текущее местоположение курсора, а также замены текущего выделения, если оно имеется.В зависимости от конкретного браузера, YMMV.

function insertAtCursor(myField, myValue) {

/* selecion model - ie */
if (document.selection) {
  myField.focus();
  sel = document.selection.createRange();
  sel.text = myValue;
}

/* field.selectionstart/end  firefox */ 
else if (myField.selectionStart || myField.selectionStart == '0' ) {

  var startPos = myField.selectionStart;
  var endPos = myField.selectionEnd;
  myField.value = myField.value.substring(0, startPos)
    + myValue
    + myField.value.substring(endPos, myField.value.length);

  myField.selectionStart = startPos + myValue.length;
  myField.selectionEnd = startPos + myValue.length;
  myField.focus();
} 

// cursor not active/present
else {
  myField.value += myValue;
}

Примечание об ошибке:ссылки не правильно размечены в верхнем абзаце.

Объект выбора: http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx
Объект TextRange: http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

Answer 3

Я не думаю, что это можно сделать в каждом браузере.Кто-то сделал это в IE6, но это не работает в FF или Opera (AFAIK).Возможно, вам удастся заставить его работать во всех браузерах.

Вот запись в блоге 2005 года.