首頁 >web前端 >js教程 >如何在ContentEditable Div中準確設定插入符位置?

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

DDD
DDD原創
2024-12-10 03:46:09483瀏覽

How Can I Accurately Set the Caret Position in a 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>

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn