当前位置: 首页 > 知识库问答 >
问题:

javascript - input框限制最大字数50个字?

席烨
2023-05-22

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

共有2个答案

邵麒
2023-05-22

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

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

步德宇
2023-05-22

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

<!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>
 类似资料:
  • 本文向大家介绍iOS输入框的字数统计/最大长度限制详解,包括了iOS输入框的字数统计/最大长度限制详解的使用技巧和注意事项,需要的朋友参考一下 前言 前两周我们发了一个小集「iOS 自带九宫格拼音键盘与 Emoji 表情之间的坑」,介绍了如何解决由于输入框限制 Emoji 表情的输入导致中文拼音也无法输入的问题。 后面我们又有了新需求:对输入框已输入的文本字数进行实时统计,并在界面上显示剩余字数,

  • 我的想法是在达到最大字符限制时,将错误设置为编辑文本。是否有关于此事件的回调,或者是否有其他方法可以实现此效果?提前谢谢。

  • 问题内容: 我正在通过AJAX调用接收XML数据。标签之一包含大量文本,大约4000-5000个字符。在Firefox中,该字段在第3000个字符左右被截断。我在网上找到的大多数内容都表明,节点值的大小没有限制,但有时取决于实现方式- 没有可靠的答案。 假设对nodeValue的大小没有限制,是否有人对为什么会发生有任何建议?有任何解决方法吗? 值被截断。 -如果我打印xmlHttp.respon

  • 如何在APP实现input输入框禁止输入空格,只允许输入大小字母、数字、汉字? 方法1:运用oninput="value=value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]/g, '')",在ios端用原生自带键盘会出现输入文字时自动带入拼音并且叠加 方法2:@compositionstart和@compositionend、@input监听还是可以输入空格,具体代码

  • 问题内容: Django有各种可用于模型的数字字段,例如DecimalField和PositiveIntegerField。尽管前者可以限制为存储的小数位数和总字符数,但是有没有办法将其限制为仅存储一定范围内的数字,例如0.0-5.0? 失败了,有什么方法可以限制PositiveIntegerField只存储例如最大为50的数字吗? 问题答案: 在这种情况下,你可以从内置的IntegerField

  • 问题内容: 我是否可以使用Spring Security来限制能够同时登录网站的最大用户数量? 绝对不是并发会话控制参数。例如,我要限制最大只允许1000个用户同时登录。如果超过该通知页面说明已超过最大用户数 问题答案: 您可以通过访问SessionRegistry来查找当前登录的用户,从而使用Spring Security的并发会话控制。在Spring Security 3中,Concurren