Crear información sobre herramientas en la posición del cursor en el área de texto con jQuery

Question

Estoy tratando de crear una información sobre herramientas sobre el cursor de entrada en un área de texto. Esto sería fácil si pudiera obtener las coordenadas x, y del símbolo de intercalación en el área de texto, sin embargo he estado buscando por un tiempo y no puedo encontrar la manera de hacerlo.

Digamos que un usuario está escribiendo en un área de texto y luego presiona alguna tecla (@ símbolo por ejemplo). Intento mostrar un pequeño mensaje de ayuda sobre el área de texto.

¿Alguna idea?

Answer 1

Hmmm Realmente no veo nada en los eventos jQuery que faciliten una coordinacion x y para el cursor.

Sin embargo, hay bastantes maneras para detectar la posición del símbolo en un campo de texto:

http://laboratorium.0xab.cd/jquery/fieldselection/0.1.0/test.html

Is it possible to programmatically detect the caret position within a <input type=text> element?

Caret position in textarea, in characters from the start

Usando esto, se podía tratar de estimar el píxel coordenadas para la punta de la herramienta.

Si quiere que sea más exacto, use una fuente monoespaciada dentro de los campos de texto.

//depending on size of font 
var charWidth = 10; 
//using any number of the above methods to get caret position 
var caretPosition = getCaretPos('#myTextField'); 
var textFieldOffsetX = $('#myTextField').offset.left; 
var toopTipPositionX = caretPosition * charWidth + textFieldOffsetX; 

No es exacto y no va a ser perfecto, pero podría ser lo suficientemente cerca.

Answer 2

¿Por qué la información sobre herramientas debe estar en el símbolo de intercalación? ¿Por qué no colocarlo arriba (o en algún lugar) en el área de texto? Aquí está a demo de lo que quiero decir.

$('textarea').keyup(function(e) { 
    switch (e.which) { 
     // @ symbol 
    case 50: 
     makeTooltip(e, 'you typed in an at symbol'); 
     break; 
    } 
});