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

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

Особенности

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

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

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

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

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

Примечание: этот ответ описывает, как получить координаты символа text-cursor/caret. Чтобы найти pixel-co-ordinates, вам нужно будет расширить его еще больше.

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

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

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

Модель 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

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

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