如何在ContentEditable Div中準確設定插入符位置？

在contenteditable 元素中設定插入符位置

旨在在contenteditable div 元素內的精確位置建立插入符可能是一項具有挑戰性的任務。在向線上社群尋求協助時，您可能遇到類似以下解決方案的JavaScript 解決方案：

const range = document.createRange();
const myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);

但是，儘管這種方法存在於網路知識庫中，但事實證明這種方法在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)
}

HTML 實作

要完全整合此解決方案，請將以下HTML 合併到您的程式碼中：

<div> <p>透過此實現，按一下按鈕可以將插入符號適當地定位在可編輯div中，從而使您可以對其進行細緻的控制安置。 </p>
</div>

以上是如何在ContentEditable Div中準確設定插入符位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！