contenteditable=“true“的标签限制字数的时候修改光标位置

contenteditable="true"的标签限制字数的时候修改光标位置

有时候input和textarea并不能完全满足ui需求，这个时候我们就用contenteditable="true"来将别的标签修改为可编辑状态，但当我们通过js修改了内容之后光标的位置就是一个问题，那么下面这个函数就可以轻松搞定

function limitTextNum(element, num) {const textLen = element.innerText.lengthif(textLen <= num) {return}// 获取鼠标位置let curPosition = 0const 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();}