如何实现输入框实时限制12字符长度？现有代码仅失焦时截断

嘿，这个问题我之前也碰到过～原来的onchange事件确实只会在输入框失去焦点时才触发截断逻辑，要实现实时限制输入长度，我们只需要把触发事件换成input就可以搞定，它能覆盖所有用户输入的场景，响应更及时。

修改后的代码 #

window.onload = function() {
  // 提前获取输入框元素，避免重复DOM查询
  const inputMat = document.getElementById("mat");
  
  // 用input事件替代onchange，实时响应输入操作
  inputMat.addEventListener('input', function() {
    if (this.value.length > 12) {
      // 截断到前12个字符
      this.value = this.value.substring(0, 12);
    }
  });
}

为什么这么改？ #

• input事件的优势：它能捕捉到所有输入操作——包括键盘打字、右键粘贴、拖拽文本甚至语音输入，不像keyup这类事件会漏掉某些非键盘输入的场景，真正做到实时限制。
• 代码优化：提前把输入框元素存成变量，避免每次触发事件都重复调用document.getElementById，既提升性能又让代码更简洁。
• this的使用：在事件回调里，this直接指向当前的输入框元素，不用再重复写document.getElementById("mat")，代码可读性更强。

额外小建议 #

你还可以给输入框加上HTML原生的maxlength属性，和JS代码形成双重保障：

<input type="text" id="mat" maxlength="12">

这样浏览器原生就会限制输入长度，体验更流畅，JS代码则作为兜底，避免一些特殊场景下的绕过。

内容的提问来源于stack exchange，提问作者 SlaaSh