When div is set to contentEditable=true, the cursor cannot be positioned after resetting its content

I was recently working on a comment feature that required the ability to comment on emoticons, so the contentEditable property was the first thing to consider. As a result, a problem arose...

First, comment on the district chief:

When the input content exceeds the limit, clear the content after the user input exceeds the limit.

This is easy... But after clearing the content, the cursor actually moved to the front, which is a headache.

After various searches, I found a solution. Without further ado, here is the code!

var _div = document.querySelector('.discuss_area');
var range = document.createRange();

range.selectNodeContents(_div);
range.collapse(false);

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

All of them use native events, so jQuery objects cannot be used.

This article is about solving the problem that when a div is set to contentEditable=true, the cursor cannot be positioned correctly after resetting its content. This is the end of the article. For more relevant content about div setting contentEditable=true, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!