Crea tooltip nella posizione del cursore nell'area di testo con jQuery

Question

Sto tentando di creare un suggerimento sopra il punto di inserimento in un'area di testo. Questo sarebbe facile se potessi ottenere le coordinate x, y del cursore nell'area di testo, tuttavia ho cercato per un po 'e non riesco a capire come farlo.

Supponiamo che un utente stia digitando un'area di testo e quindi preme un tasto (ad esempio, simbolo @). Sto cercando di mostrare un piccolo suggerimento sopra il punto di vista dell'area di testo.

Qualche idea?

Answer 1

Hmmm In realtà non vedo nulla negli eventi di jQuery che possa facilmente darvi un x y coord per il cursore.

Tuttavia ci sono alcuni modi per rilevare la posizione del cursore in un campo di testo:

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 questo, si potrebbe provare a stimare il pixel coordinate per la punta dell'utensile.

Se si desidera che sia più preciso, utilizzare un carattere monospazio all'interno dei campi di testo.

//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; 

Non è esatto e non sarà perfetto, ma potrebbe essere abbastanza vicino.

Answer 2

Perché il suggerimento deve essere sul cursore? Perché non posizionarlo sopra (o da qualche altra parte) nella textarea? Ecco a demo di cosa intendo.

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