如何在HTML textarea中找到光標位置（X/Y，而非行/列）？

我想在<textarea>中顯示下拉列表以幫助用戶輸入某些內容。您從當前的IDE中瞭解到這一點代碼完成。當您開始輸入內容時，彈出窗口會顯示在當前的光標/插入符號位置，您可以使用箭頭鍵導航它以完成文本輸入。如何在HTML textarea中找到光標位置（X/Y，而非行/列）？

我知道在文本字符串how to get the cursor position（即光標位置的字符索引），但我不知道如何讓光標的X/Y座標（像offsetWidth和offsetHeight）的<textarea>元素讓裏面我可以在那裏放置我的列表元素。這在HTML/JavaScript中是可行的，它將如何工作？

來源

2011-08-05 ygoe

+ 1這是一個很好的問題！ – Ben

如果你知道字符的數量和方塊的寬度，你能猜出基於平均字符寬度/線條高度的位置嗎？ –

我已閱讀提出的其他問題，但我不認爲它的答案是解決問題的方法。而且，它已經有3年的歷史了，瀏覽器和標準也同時進步了。我並不害怕需要使用當前的瀏覽器才能正常工作。 – ygoe

用（如CKeditor或Rich Text Editor甚至更好的iframe：jsfiddle）可編輯HTML輸入，你可以插入在光標位置空span元素，並得到該元素的位置，以顯示你的下拉列表。

它看起來很複雜，但我想不出任何其他方式來做到這一點。

它有一些額外的可能性用於代碼編輯器時，你可以顏色代碼一樣的jsfiddle文本和格式代碼執行，甚至可能建立某種形式的代碼自動完成關鍵字等

來源

2011-08-05 12:45:09 Willem

額外的可能性聽起來不錯，您的有趣建議也是如此。但我想確保用戶無法輸入格式化文本（例如從MS Word或其他網頁進行復制時），並且所有粘貼的文本都會重新格式化爲純文本格式，並且可以轉換爲純文本格式。 – ygoe

這是可能的，jsfiddle.net就是這麼做的。他們究竟做了些什麼，我不知道。嘗試編碼並在該網站上粘貼片刻，這可能會給你一些想法。（在FF ctrl + v不起作用，但「右鍵單擊 - 粘貼」）） – Willem

CKeditor可以下載並作爲開源使用，但jsfiddle似乎只是一個Web應用程序，沒有下載，沒有技術見解。你知道他們是如何做到的嗎？ – ygoe

如何在HTML textarea中找到光標位置（X/Y，而非行/列）？

回答

相關問題