如何精確控制 Contenteditable Div 中的插入符位置？

Contenteditable 元素中的插入符位置

為了操縱contenteditable div 中的插入符位置，已經進行了許多嘗試來利用Range 和選擇對象取得了不同程度的成功。然而，最近的努力發現了設定遊標位置的精確方法：

將插入符設定為特定字元

在Firefox 和Chrome 等瀏覽器中，所需的結果可以透過使用以下程式碼來實現：

function setCaret() {
    var el = document.getElementById("editable")
    var range = document.createRange()
    var sel = window.getSelection()
    
    range.setStart(el.childNodes[2], 5)
    range.collapse(true)
    
    sel.removeAllRanges()
    sel.addRange(range)
}

在此程式碼中，遊標位於第二個的第五個字元處contenteditable div 中 ID 為「editable」的文字行。這是透過指定目標節點 (el.childNodes[2]) 以及該節點內範圍起點和終點的偏移位置 (5) 來完成的。

細化位置

為了獲得最大精度，可以在程式碼中包含額外的節點和偏移量，以將遊標的位置縮小到嵌套元素內甚至特定的特定字符內單字。這種層級的控制允許在複雜的 HTML 結構中進行無縫的遊標操作。

以上是如何精確控制 Contenteditable Div 中的插入符位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！