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

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

阅读 2.8k

可以监听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属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？