控制 input 输入框字数

问题

如何控制 input 输入框的输入字数？

解答

使用 maxlength 属性

最简单的方式是通过 maxlength 属性限制输入字数：

<input maxlength="5" />

这会直接阻止用户输入超过指定长度的字符。

使用 oninput 事件

如果需要更灵活的控制，可以监听 oninput 事件：

const input = document.querySelector('input');

input.addEventListener('input', function(e) {
  const maxLength = 5;
  if (this.value.length > maxLength) {
    this.value = this.value.slice(0, maxLength);
  }
});

关键点

• maxlength 属性是原生的字数限制方案，浏览器会自动阻止超长输入
• oninput 事件可以实现自定义的输入处理逻辑
• 使用 oninput 时需要手动截取字符串长度