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

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