contenteditable DIV完美解决maxlength问题

小小米粒吖

于 2024-04-26 14:04:40 发布

阅读量218

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41472431/article/details/138217082

版权

本文介绍了如何在Vue应用中使用`onKeypress`和`onCompositionend`事件，实现当用户输入超过最大长度时，自动截断并保留部分文本的逻辑，涉及DOM操作和文本处理技术。

摘要由CSDN通过智能技术生成

参考网站：https://article.juejin.cn/post/7133579641382436878

在线地址：Vue (forked) - StackBlitz

主要代码

const onKeypress = (event) => {
      if (event.target.innerText.length >= props.maxlength) {
        event.preventDefault();
      }
};

        const onCompositionend = (event) => {
      const diff = event.target.innerText.length - props.maxlength;
      if (diff > 0) {
        const range = document.createRange();
        const sel = window.getSelection();
        const offset = sel.anchorOffset;
        const node = sel.anchorNode;
        const text = node.textContent;
        range.selectNodeContents(node);
        sel.removeAllRanges();
        setTimeout(() => {
          sel.addRange(range);
          sel.extend(node, offset);
          document.execCommand('delete', false);
          document.execCommand(
            'insertText',
            false,
            text.substring(0, offset - diff)
          );
        }, 0);
      }