给contenteditable的div设置maxlength

使用可编辑的div输入框，还是有一些好处，比如可以使高度随着内容增加而增加，这是input和textarea比较难做到的

// 设置输入最大长度为10
const maxlength = 10;
// 是否在输入中文
let isComposing = false;
// 输入的文本
let textContent = "";

// 获取可编辑div输入框元素
const divInput = document.querySelector(".div-input");

// 限制输入字数的方法
const sliceInnerText = () => {
  const innerText = divInput.innerText;
  // 判断字数是否超出
  if (innerText.length > maxlength) {
    // 获取selection，这是一个很早就有的API
    const selection = window.getSelection();
    // 获取当前鼠标在输入框中的位置
    let anchorOffset = selection.anchorOffset;
    // 判断已输入的文本是否超出最大长度
    if (textContent.length >= maxlength) {
      // 如果超出了文本长度，则修改innerText的内容为输入前的内容
      // 实际上就是限制了字符输入
      divInput.innerText = textContent;
      // 此时要将光标往前挪一位
      anchorOffset -= 1;
    }
    // 光标位置值不能超过最大长度，否则会报错
    // 如果不设置，在输入中文时，会报错
    if (anchorOffset > maxlength) {
      anchorOffset = maxlength;
    }
    // 将记录的光标位置重新设置一下
    selection.setPosition(divInput.childNodes[0], anchorOffset);
  }
  // 设置当前输入框的内容
  textContent = divInput.innerText;
};

// 监听input事件
divInput.addEventListener("input", (event) => {
  // 如果在输入中文，则暂不处理
  if (isComposing) {
    return;
  }
  // 限制长度
  sliceInnerText();
});

// 这个事件在输入中文开始时触发
divInput.addEventListener("compositionstart", () => {
  isComposing = true;
});

// 这个事件在输入中文结束后出发
divInput.addEventListener("compositionend", () => {
  isComposing = false;
  sliceInnerText();
});