如何以程式設計方式設定 ContentEditable 元素中的插入符位置？

在內容可編輯元素中設定插入符位置

在內容可編輯 div 中設定插入符位置可以使用 Range 和 Selection 物件來實現。以下是如何將插入符號設定到元素內的特定位置：

代碼：

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)
}

說明：

• el 代表可內容編輯元素。
• range是用來指定插入符號的Range物件position.
• sel 是用來操作選取的 Selection 物件。
• setStart() 將範圍的開始設定為指定節點和偏移量（el.childNodes[2] 和 5，分別）。
• collapse() 將範圍折疊到開始時的單點位置。
• removeAllRanges() 刪除任何現有選擇。
• addRange() 將建立的範圍加入選擇中。

範例：

考慮以下HTML：

<div>

當您點選「焦點」按鈕，呼叫JavaScript 函數setCaret()，將插入符號放置在第二行文字的第五個字元處。

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