Javascript 为什么当点击“最大长度”时，此contenteditable div插入符号（闪烁光标）会跳到开头？

我有一个设置了最大字符限制的输入字段，当输入达到最大限制时，结束字符将被删除。问题是当达到限制时，插入符号将跳回文本的开头而不是结尾。在文本之间插入时也会发生这种情况

有人能给我解释一下为什么会发生这种情况，以及我如何使插入符号出现在课文的末尾

HTML

<div id="usertitle-editable" class="title-contenteditable maxlength-contenteditable" placeholder="enter input here" contenteditable="true" autocomplete="off" type="text" ></div>

---

我相信有一种更简洁的方法，但这里有一个解决方案，通过使用

document.createRange（）

和

window.getSelection（）

$("#usertitle-editable").keyup(function(event) {
  var text = document.getElementById('usertitle-editable').innerHTML;
    if (text.length > 3)
    document.getElementById('usertitle-editable').innerHTML = (text.substring(0, 3));
});