contenteditable="true"的标签限制字数的时候修改光标位置
有时候input和textarea并不能完全满足ui需求,这个时候我们就用contenteditable="true"来将别的标签修改为可编辑状态,但当我们通过js修改了内容之后光标的位置就是一个问题,那么下面这个函数就可以轻松搞定
function limitTextNum(element, num) {
const textLen = element.innerText.length
if(textLen <= num) {
return
}
// 获取鼠标位置
let curPosition = 0
const selection = window.getSelection();
if(selection.rangeCount > 0) {
let curRange = selection.getRangeAt(0);
curPosition = curRange.endOffset;
}
if(curPosition > num) {
curPosition = num
}
// 删除多余的文字
element.innerText = element.innerText.slice(0, num)
// 还原光标位置
const range = document.createRange();
range.setStart(element.firstChild, curPosition);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
element.focus();
}