在Contenteditable 元素中設定插入符號位置
在Web 開發中,您可能會遇到想要控制插入符號(遊標)位置的情況在可內容編輯的元素內,例如文字編輯器或訊息輸入欄位。這允許在特定位置進行精確編輯或遊標放置。
要實現此目的,您可以利用 JavaScript 中的 Range 和 Selection 物件。以下是示範如何設定插入符位置的範例:
function setCaret() { var el = document.getElementById("editable"); var range = document.createRange(); var sel = window.getSelection(); // Set the start position of the range at the beginning of the fifth character of the third line range.setStart(el.childNodes[2], 5); // Collapse the range to the start point range.collapse(true); // Set the selection to start at the start position of the range sel.removeAllRanges(); sel.addRange(range); }
在此範例中,我們假設存在一個
請注意,插入符號定位的具體實作在不同瀏覽器中可能會略有不同。然而,這裡描述的一般方法得到了廣泛的支持。
以上是如何在內容可編輯元素中設定插入符位置?的詳細內容。更多資訊請關注PHP中文網其他相關文章!