獲取鍵盤焦點座標textarea或輸入

Question

我不確定是否|被稱爲鍵盤遊標。無論如何，我有一個輸入控件，我希望獲得| |的座標是。

換句話說，如果我輸入標籤氣體文本：

hello world | bla bla

然後我會想獲得鍵盤光標的座標。通過猜測看起來像80px朝右側，5px朝向底部。

我知道如何獲得光標的位置，然後我可以通過計算字符的數量來估計位置，但這不可靠，因爲某些字母比其他字母寬。換句話說，我將能夠通過使用this technique來判斷光標在位置12。

Answer 1

如果您使用的是等寬字體，然後將可見字符數乘以當前使用的字體寬度，則只能有一個確切值。

Answer 2

您可以使用與光標左側文本相同的內容（text.value.substr（0，text.getCaretPosition（））創建另一個元素（或具有display：inline的另一個容器）。 #fakeText元素添加另一個 然後確保#fakeText的所有CSS樣式與您的文本輸入/文本區域相同，除了display：inline。

最後測量#fakeCaret的位置相對到#fakeText的左上角 這種方法是我所知道的唯一一種爲可變寬度字體提供x和y座標的方法。我們在nk.pl中使用這種方法將自動完成符定位在插入符號下方。