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

  • Z时代
  • 2024-02-29
  • 分类：IT

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

回答：

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

<!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>

回答：

InputEvent 上有一个 inputType 属性，可以配合 input 事件区分是文本输入还是用户复制粘贴再进行对应处理。

MDN 文档：https://developer.mozilla.org/zh-CN/docs/Web/API/InputEvent/i...

以上是 input框限制最大字数50个字？ 的全部内容， 来源链接： utcz.com/p/934322.html

回到顶部