Примечание: этот ответ описывает, как получить символьные координаты текстового курсора / каретки. Чтобы найти координаты пикселей, вам нужно расширить это.
Первое, что нужно запомнить, это то, что курсор может находиться в трех состояниях
- обычный курсор вставки в определенной позиции
- выделение текста с определенной ограниченной областью
- не активен: текстовая область не имеет фокуса. Не был использован.
Модель 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