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

posicionar cursor en input javascript

Question

Estoy usando jQuery e intento encontrar una forma de navegador cruzado para obtener las coordenadas de píxel del símbolo de intercalación en <textarea> sy cuadros de input poder colocar un div completamente posicionado alrededor de esta ubicación.

¿Hay algún plugin jQuery? O fragmento de JavaScript para hacer precisamente eso?

Answer 1

He buscado un complemento de coordenadas textarea caret para meteor-autocomplete , por lo que he evaluado los 8 complementos en GitHub. El ganador es, por mucho, textarea-caret-position de Component .

Caracteristicas

• precisión de píxel
• ninguna dependencia en absoluto
• compatibilidad con el navegador: Chrome, Safari, Firefox (a pesar de two bugs que tiene), IE9 +; puede funcionar pero no probado en Opera, IE8 o anterior
• 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 barras de desplazamiento horizontales o verticales en el área de texto
• admite retornos duros, pestañas (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 hay una posición "fantasma" en el espacio vacío al final de una línea cuando se envuelven palabras largas

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

Cómo funciona

Un mirror <div> se crea fuera de la pantalla y tiene el mismo estilo que el <textarea> . Luego, el texto del textarea hasta el símbolo de intercalación se copia en el div y se inserta un <span> justo después. Luego, el contenido de texto del tramo se establece en el resto del texto en el área de texto, con el fin de reproducir fielmente el ajuste en el faux div.

Este es el único método garantizado para manejar todos los casos de bordes relacionados con el embalaje de líneas largas. También lo usa GitHub para determinar la posición de su menú desplegable @ usuario.

Answer 2

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 puedas hacer que funcione en todos los navegadores.

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

Answer 3

Nota: esta respuesta describe cómo obtener las coordenadas de los caracteres del cursor de texto / cursor. Para encontrar las coordenadas de píxel, deberás extender esto más.

Lo primero que debe 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 limitada
• no activo: textarea no tiene foco. No ha sido usado.

El modelo de IE utiliza la Object document.selection , a partir 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 usa las útiles variables [input] .selectionStart y selectionEnd.

Ambos modelos representan un cursor constante 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, puede encontrar que ninguno está configurado. He tenido éxito con el siguiente código para insertar un fragmento de texto en la ubicación actual del cursor, y también reemplazo 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 se marcan correctamente en el párrafo superior.

Objeto de selección: document.selection
Objeto TextRange: TextRange