我可以在ContentEditable中找到光標的像素位置嗎？

Question

我的意思是找到光標的頂部/左側像素位置，而不是字符偏移量。

我想這樣做的原因是因爲我想在鍵入或單擊時在光標後面顯示一個類似於工具提示的div（請參閱較新的MS Word的浮動格式框）。如果用戶點擊，我可以使用鼠標座標，但不知道如何進行打字。

有沒有可靠的方法？如果不是查找光標的頂部/左側位置，則替代方法是找到行的頂部位置。

只要該方法有效並且已被充分解釋，示例代碼不是100％必需的。

Answer 1

這不是一個真正的答案，但概念來思考：

在CONTENTEDITABLE，一切由就像任何其他HTML節點，這樣你就可以得到該節點的位置，問題出在哪裏在你的節點（如果是文本，則節點內可能有100個字符）。所以你必須製作你自己的單個字符節點。

要獲得某個類型的位置，您必須捕獲onkeypress事件，停止傳播泡泡，獲取他們要求的字符，將其填入節點（也許跨度ala「標記」）然後插入該節點。然後，您可以通過偏移量計算該跨度/節點的確切位置。

您可能必須刪除該跨度並將其替換爲之後的字符。

還有我遇到過的問題，如果在滾動應該發生時混淆了氣泡事件，則脫字符可能會超出視口。

可選地，這可能是一個稍微好一點的主意，而不是混淆傳播，允許瀏覽器自行插入字符，然後立即在跨度/節點中插入零寬度unicode字符（不可見）之前或之後，並計算它的位置。然後在飛行中或暫停打字時拔出標記。

是的，這是一團糟，對不起。如果有人有更好的辦法，我全都耳熟能詳。

Answer 2

試試這個

var cursorY = window.getSelection().getRangeAt(0).getBoundingClientRect().top; 

走馬是在窗口光標Y位置。

A Selection object代表由 用戶選擇的文本範圍或插入符的當前位置。

Selection.getRangeAt()返回一個範圍對象，表示當前所選範圍中的一個 。