如何取得 ContentEditable 元素中的插入符位置？

取得 ContentEditable 插入符位置

確定 contentEditable 元素中目前插入符位置對於各種編輯任務至關重要。與設定插入符位置不同，取得其目前位置需要更複雜的方法。

提供的程式碼片段假設一個簡單的場景，其中 contentEditable div 中包含一個文字節點。如果 div 的 CSS 空白屬性設為 pre，則需要更複雜的方法。

實作

函數getCaretPosition 使用不同的技術來擷取插​​入符號位置，取決於在瀏覽器上：

• 對於支援window .getSelection() 的現代瀏覽器，結束利用範圍的偏移量來決定插入符號位置。
• 對於使用 document.selection 的舊版瀏覽器，會插入一個輔助元素來計算插入符號位置。

用法

在提供的HTML 和JavaScript 程式碼範例中，更新函數會不斷更新#caretposition 中顯示的插入符號位置分割區透過偵聽滑鼠事件（mousedown、mouseup）和鍵盤事件（keydown、keyup），當使用者與contentEditable元素互動時，會捕捉並即時顯示插入符號位置，從而準確了解當前遊標位置。

其他注意事項

如果遇到可編輯內容具有嵌套元素的情況，請參閱替代方案連結答案中描述的方法以獲得更全面的方法。此解決方案可以更有效地處理複雜的內容場景。

以上是如何取得 ContentEditable 元素中的插入符位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！