时间戳

首页 > 解决方案 > 为什么这个 contenteditable div 插入符号（闪烁的光标）在达到最大长度时会跳到开头？

javascript - 为什么这个 contenteditable div 插入符号（闪烁的光标）在达到最大长度时会跳到开头？

问题描述

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

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

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));
});

标签： javascriptjquery

解决方案

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

推荐阅读