为什么这个内容可编辑的div插入符号(闪烁光标)在达到最大长度时跳到开头?

Question

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

有人可以向我解释为什么会发生这种情况以及如何使插入符号出现在文本末尾。

https://jsfiddle.net/mLop29rv/1/

.HTML

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

.JS

$("#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));
});

Answer 1

我相信有一种更简洁的方法，但这里有一个解决方案，可以使用将光标移动到文本末尾document.createRange()和window.getSelection()JSFiddle