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

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

Вот сообщение в блоге за 2005 год .

Примечание: этот ответ описывает, как добраться символьные координаты из text-cursor/caret. Для нахождения пиксельных координат необходимо будет расширить это далее.

первая вещь помнить состоит в том, что курсор может быть в трех состояниях

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

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

модель/Opera FF использует удобный [входной] .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 (По сравнению с 85) объектом .aspx
TextRange: http://msdn.microsoft.com/en-us/library/ms535872 (По сравнению с 85) .aspx