input框限制最大字数50个字？

input框限制最大字数50个字，输入超过50个字自动截取掉，可以使用input自带属性maxlength，但是当外部复制粘贴过来100个字的时候，使用maxlength也会自动截取掉，但此时用户并不知道已经被截取了，希望给出提示并且不截取文字。
希望达到效果用户正常输入的时候超过50个字自动截取，外部复制粘贴的时候不截取给出提示

阅读 3k

可以监听input事件和paste事件来实现，具体如下代码所示：
整体思路是这样的, 具体细节上的再根据你的实际情况修改

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <input type="text" maxlength="50" id="myInput">
  </body>
  <script>
    const inputEl = document.getElementById('myInput');

    // 监听input事件
    inputEl.addEventListener('input', function(e) {
      const maxLength = parseInt(e.target.getAttribute('maxlength'));
      const textLength = e.target.value.length;
      console.log(e.target.value)
      if (textLength > 50 || textLength == 50) {
        e.target.value = e.target.value.slice(0, maxLength);
        alert('超出字数了');
      }
    });

    // 监听paste事件
    inputEl.addEventListener('paste', function(e) {
      // 阻止默认粘贴行为
      e.preventDefault();
      const maxLength = parseInt(e.target.getAttribute('maxlength'));

      // 获取剪切板中的数据，并取前maxLength个字符
      const clipboardContent = e.clipboardData.getData('text/plain');
      // 判断剪切板中内容长度是否超过maxLength 
      if (clipboardContent.length == maxLength || clipboardContent.length > maxLength) {
        alert('最多只能输入' + maxLength + '个字哦~');
        inputEl.setAttribute('maxlength', clipboardContent.length + maxLength)
        e.target.value += clipboardContent;
        return;
      }
      e.target.value += clipboardContent;
    })
  </script>

</html>

input框限制最大字数50个字？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

如何防止接口的 key 泄露?

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

Next.js做纯前端是否可行？

在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？

如何在Vue中点击菜单弹出v-dialog对话框？

如何用Vue实现Word文档自动分页与双页排版功能？