¿Cómo obtengo las coordenadas de píxel (x, y) del recuadro en los cuadros de texto?

Nota: esta respuesta describe cómo obtener las coordenadas del carácter del cursor de texto/caret. Para encontrar las coordenadas de píxel, tendrá que ampliar esto aún más.

Lo primero que hay que recordar es que el cursor puede estar en tres estados

• un cursor de inserción regular en una posición específica
• una selección de texto que tiene un cierto área acotada
• no está activo: textarea no tiene foco. No se ha utilizado.

El modelo IE utiliza el Object documento.selection , de esto podemos obtener un objeto TextRange que nos da acceso a la selección y, por lo tanto, a la(s) posición (es) del cursor.

El modelo FF/Opera utiliza las útiles variables [input].selectionStart y selectionEnd.

Ambos modelos representan un cursor ativo regular como una selección de ancho cero, con el límite izquierdo siendo la posición del cursor.

Si el campo de entrada no tiene foco, puede encontrar que ninguno de los dos está establecido. He tenido buen éxito con el siguiente código para insertar un fragmento de texto en la ubicación actual del cursor, también reemplazando la selección actual, si está presente. Dependiendo del navegador exacto, 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;
}

Nota de error: los enlaces no están correctamente marcados en el párrafo superior.

Objeto de selección: http://msdn.microsoft.com/en-us/library/ms535869 (VS.85).aspx
Objeto TextRange: http://msdn.microsoft.com/en-us/library/ms535872 (VS.85).aspx

No creo que se pueda hacer en todos los navegadores. Alguien lo ha hecho en IE6, pero no funciona en FF u Opera (AFAIK). Tal vez usted puede conseguir que funcione en todos los navegadores.

Aquí hay una entrada de blog de 2005 .