How Can I Accurately Set the Caret Position in a ContentEditable Div?

Setting Caret Position in a contenteditable Element

Aiming to establish the caret at a precise location within a contenteditable div element can be a challenging task. Seeking assistance from the online community, you may have encountered a JavaScript solution similar to the one below:

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

However, despite its existence in the web's knowledge repository, this approach has proven ineffective in both Firefox and Chrome.

Embracing the Range and Selection Objects

To rectify the situation, unlocking the potential of the Range and Selection objects is crucial. These objects serve as the gatekeepers to precisely controlling the caret's placement.

To illustrate their application, let's move the caret to the fifth character of the second line of text. Here's how it can be achieved:

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 Implementation

To fully integrate this solution, incorporate the following HTML within your code:

<div>

With this implementation, clicking the button aptly positions the caret within the editable div, granting you meticulous control over its placement.

The above is the detailed content of How Can I Accurately Set the Caret Position in a ContentEditable Div?. For more information, please follow other related articles on the PHP Chinese website!