Tạo chú giải công cụ tại vị trí con trỏ trong vùng văn bản với jQuery

Question

Tôi đang cố gắng tạo chú giải công cụ phía trên dấu mũ đầu vào trong vùng văn bản. Điều này sẽ dễ dàng nếu tôi có thể nhận được tọa độ x, y của dấu mũ trong vùng văn bản, tuy nhiên tôi đã tìm kiếm một lúc và không thể tìm ra cách để làm điều đó.

Nói người dùng đang nhập vào vùng văn bản và sau đó nhấn một số phím (ví dụ: biểu tượng @). Tôi đang cố gắng hiển thị một chú giải công cụ nhỏ phía trên dấu kiểm vùng văn bản.

Bất kỳ ý tưởng nào?

Answer 1

Hmmm Tôi không thực sự thấy bất cứ điều gì trong các sự kiện jQuery sẽ dễ dàng cung cấp cho bạn một điều phối x y cho dấu mũ.

Tuy nhiên có khá nhiều cách để phát hiện vị trí dấu nháy trong một lĩnh vực văn bản:

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

Sử dụng này, bạn có thể thử để ước lượng pixel tọa độ cho đầu công cụ.

Nếu bạn muốn chính xác hơn, hãy sử dụng phông chữ đơn cách bên trong các trường văn bản của bạn.

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

Nó không chính xác và nó sẽ không hoàn hảo, nhưng nó có thể đủ gần.

Answer 2

Tại sao chú giải công cụ phải ở dấu mũ? Tại sao không đặt nó ở trên (hoặc ở đâu đó xung quanh) vùng văn bản? Đây là a demo về ý tôi.

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