如何獲得文本框中插入符號的 (x, y) 像素坐標？

Question

我正在使用 jQuery 並試圖找到一種跨瀏覽器的方式來獲取<textarea>和input框中插入符號的像素坐標，以便我可以在這個位置周圍放置一個絕對定位的 div。

是否有一些 jQuery 插件？ 或者 JavaScript 片段來做到這一點？

Answer 1

我已經為meteor-autocomplete尋找了textarea插入符號插件，所以我已經評估了GitHub上的所有8個插件。 到目前為止，勝利者是來自Component的 textarea-caret-position 。

特征

• 像素精度
• 沒有依賴關系
• 瀏覽器兼容性：Chrome，Safari，Firefox（盡管有兩個 漏洞 ），IE9 +; 可以工作，但未在Opera，IE8或更早版本中測試過
• 支持任何字體系列和大小，以及文本轉換
• 文本區域可以具有任意填充或邊框
• 不會被textarea中的水平或垂直滾動​​條混淆
• 支持硬回車，標簽（IE上除外）和文本中的連續空格
• 在比文本區域中的列長的行上的正確位置
• 當包裹長詞時，在行尾的空白處沒有“鬼”位置

這是一個演示 - http://jsfiddle.net/dandv/aFPA7/

這個怎么運作

鏡像<div>在屏幕外創建，其樣式與<textarea>完全相同。 然后，直到插入符號的textarea文本被復制到div中，並在其后插入<span> 。 然后，跨度的文本內容被設置為textarea中文本的剩余部分，以便忠實地再現人造div中的包裝。

這是保證處理與包裝長行相關的所有邊緣情況的唯一方法。 它也被GitHub用來確定其@用戶下拉列表的位置。

Answer 2

我不認為它可以在每個瀏覽器中完成。 有人在IE6中完成了它，但它在FF或Opera（AFAIK）中不起作用。 也許你可以在所有瀏覽器中使用它。

這是2005年的博客文章 。

Answer 3

注意：這個答案描述了如何獲得text-cursor / caret的字符坐標 。 要找到像素坐標，您需要進一步擴展。

要記住的第一件事是光標可以處於三種狀態

• 在特定位置的常規插入光標
• 具有特定有界區域的文本選擇
• 不活躍：textarea沒有焦點。 尚未使用過。

IE模型使用Object document.selection ，從中我們可以得到一個TextRange對象，它允許我們訪問選擇，從而訪問光標位置。

FF模型/ Opera使用方便的變量[input] .selectionStart和selectionEnd。

兩種模型都將常規活動光標表示為零寬度選擇，左邊界是光標位置。

如果輸入字段沒有焦點，您可能會發現兩者都沒有設置。 我使用以下代碼取得了很好的成功，在當前光標位置插入一段文本，同時替換當前選擇（如果存在）。 根據確切的瀏覽器，YMMV。

function insertAtCursor(myField, myValue) {

/* selecion model - ie */
if (document.selection) {
  myField.focus();
  sel = document.selection.createRange();
  sel.text = myValue;
}

/* field.selectionstart/end  firefox */ 
else if (myField.selectionStart || myField.selectionStart == '0' ) {

  var startPos = myField.selectionStart;
  var endPos = myField.selectionEnd;
  myField.value = myField.value.substring(0, startPos)
    + myValue
    + myField.value.substring(endPos, myField.value.length);

  myField.selectionStart = startPos + myValue.length;
  myField.selectionEnd = startPos + myValue.length;
  myField.focus();
} 

// cursor not active/present
else {
  myField.value += myValue;
}

錯誤注意：鏈接未在頂部參數中正確標記。

選擇對象： http ： //msdn.microsoft.com/en-us/library/ms535869（VS.85）.aspx
TextRange對象： http ： //msdn.microsoft.com/en-us/library/ms535872（ VS.85） .aspx