Tworzenie podpowiedzi w pozycji kursora w obszarze tekstowym za pomocą jQuery

Question

Próbuję utworzyć etykietkę narzędzia nad rzutnikiem wejściowym w obszarze tekstowym. Byłoby to łatwe, gdybym mógł uzyskać współrzędne x, y kurtyny w obszarze tekstowym, jednak poszukiwałem trochę czasu i nie mogę wymyślić, jak to zrobić.

Powiedz, że użytkownik pisze w polu tekstowym, a następnie naciska klawisz (np. Symbol @). Próbuję pokazać małą etykietkę narzędzia nad kodem obszaru tekstowego.

Wszelkie pomysły?

Answer 1

Hmmm Naprawdę nie widzę niczego w zdarzeniach jQuery, które z łatwością dadzą ci x y coordin dla karetki.

jednak istnieje sporo sposobów wykrywania położenia daszka w polu tekstowym:

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

Używanie tego, można próbować oszacować piksel współrzędne wskazówki narzędzia.

Jeśli chcesz, aby był dokładniejszy, używaj czcionki o stałej szerokości wewnątrz pól tekstowych.

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

To nie jest dokładne i nie będzie idealne, ale może być wystarczająco blisko.

Answer 2

Dlaczego ta podpowiedź musi znajdować się w kracie? Dlaczego nie umieścić go powyżej (lub w innym miejscu) obszaru tekstowego? Oto a demo o co mi chodzi.

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