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

Question

Estoy usando jQuery y estoy tratando de encontrar una forma en todos los navegadores para obtener las coordenadas de píxeles del símbolo de intercalación. <textarea>arena input cajas de modo que pueda colocar un div absolutamente posicionado alrededor de esta ubicación.

¿Existe algún complemento de jQuery?¿O un fragmento de JavaScript para hacer precisamente eso?

Answer 1

He buscado un complemento de coordenadas de intercalación de área de texto para autocompletar meteorito, así que evalué los 8 complementos en GitHub.El ganador es, con diferencia, posición-caret-área-de-texto de Componente.

Características

• precisión de píxeles
• sin dependencias de ningún tipo
• compatibilidad del navegador:Chrome, Safari, Firefox (a pesar de dos insectos tiene), IE9+;puede funcionar pero no se ha probado en Opera, IE8 o versiones anteriores
• admite cualquier familia y tamaño de fuente, así como transformaciones de texto
• el área de texto puede tener relleno o bordes arbitrarios
• no confundido por las barras de desplazamiento horizontales o verticales en el área de texto
• admite devoluciones, tabulaciones (excepto en IE) y espacios consecutivos en el texto
• posición correcta en líneas más largas que las columnas en el área de texto
• No posición "fantasma" en el espacio vacío al final de una línea al envolver palabras largas

Aquí hay una demostración: http://jsfiddle.net/dandv/aFPA7/

Cómo funciona

Un espejo <div> se crea fuera de la pantalla y tiene el mismo estilo que el <textarea>.Luego, el texto del área de texto hasta el cursor se copia en el div y un <span> se inserta justo después de él.Luego, el contenido del texto del intervalo se establece en el resto del texto en el área de texto, para reproducir fielmente el ajuste en el falso div.

Este es el único método que garantiza manejar todos los casos extremos relacionados con el ajuste de líneas largas.GitHub también lo utiliza para determinar la posición de su @ menú desplegable de usuarios.

Answer 2

Nota:esta respuesta describe cómo obtener el coordenadas de personajes del cursor de texto/carácter.Para encontrar las coordenadas de píxeles, deberá ampliar esto más.

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

• un cursor de inserción normal en una posición específica
• una selección de texto que tiene un área delimitada determinada
• no activo:El área de texto no tiene foco.No se ha utilizado.

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

El modelo FF/Opera utiliza las útiles variables [entrada].selectionStart y SelectionEnd.

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

Si el campo de entrada no tiene foco, es posible que ninguno de los dos esté configurado.Tuve mucho éxito con el siguiente código para insertar un fragmento de texto en la ubicación actual del cursor, reemplazando también 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 marcados correctamente en el párrafo superior.

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

Answer 3

No creo que se pueda hacer en todos los navegadores.Alguien lo ha hecho en IE6, pero no funciona en FF u Opera (AFAIK).Quizás puedas hacer que funcione en todos los navegadores.

Aquí hay una publicación de blog de 2005..