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

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

есть ли плагин jQuery? Или фрагмент JavaScript для этого?

28
cross-browser javascript jquery

3 ответов

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

особенности

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

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

enter image description here

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

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

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

31

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

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

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

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

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

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

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

1

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

здесь блог с 2005.

0