Sometimes, we want to set cursor position on contentEditable div with JavaScript.
In this article, we’ll look at how to set cursor position on contentEditable div with JavaScript.
How to set cursor position on contentEditable div with JavaScript?
To set cursor position on contentEditable div with JavaScript, we use the selectNodeContents
method.
For instance, we write
const el = document.getElementById("idOfYoursContentEditable");
const selection = window.getSelection();
const range = document.createRange();
selection.removeAllRanges();
range.selectNodeContents(el);
range.collapse(false);
selection.addRange(range);
el.focus();
to select the div with getElementById
.
Then we get the selection with getSelection
.
Next, we create the selectionb range with createRange
.
And we remove existing selection with removeAllRanges
.
Next, we call selectNodeContents
to set the selection.
Then we call addRange
to make the selection.
Finally we call focus
to focus on the element.
Conclusion
To set cursor position on contentEditable div with JavaScript, we use the selectNodeContents
method.