如何用JavaScript或jQuery限制input标签的数字输入位数为16位

首先明确：max="16" 对 type="number" 的input来说，限制的是数值大小（即输入数字不能大于16），而非数字位数，这就是你能输入超16位数字的原因。以下是几种可行实现方式：

方法1：用text类型配合属性限制（推荐） #

将input类型设为text，结合maxlength、pattern和inputmode，既能限制位数，又能确保仅输入数字，还优化移动端体验：

<input 
  type="text" 
  inputmode="numeric" 
  pattern="[0-9]{1,16}" 
  maxlength="16" 
  title="请输入1-16位数字"
>

• maxlength="16"：直接限制输入字符长度最多16位
• pattern="[0-9]{1,16}"：正则校验内容仅为数字，长度1-16位（表单提交时触发校验）
• inputmode="numeric"：让移动端弹出数字键盘，提升操作体验

方法2：用JavaScript实时截断（适配必须用number类型的场景） #

若业务要求必须用type="number"，可通过JS监听输入事件，实时截断超16位内容：

<input type="number" id="limitedNumInput">
<script>
const input = document.getElementById('limitedNumInput');
input.addEventListener('input', function() {
  if (this.value && this.value.length > 16) {
    this.value = this.value.slice(0, 16);
  }
});
</script>

注：type="number"的input会自动过滤非数字字符，无需额外处理。

方法3：结合keydown事件阻止多余输入（更严谨的拦截） #

若要在输入时直接阻止第17位输入，可监听keydown事件：

<input type="text" inputmode="numeric" id="strictInput">
<script>
const input = document.getElementById('strictInput');
input.addEventListener('keydown', function(e) {
  // 允许退格、删除、箭头键等控制键
  const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
  if (allowedKeys.includes(e.key)) return;
  
  // 当前长度已达16位，阻止输入
  if (this.value.length >= 16) {
    e.preventDefault();
  }
});
</script>

该方式可在用户输入第17位时直接拦截，建议配合maxlength使用，体验更流畅。

内容的提问来源于stack exchange，提问作者Asma Binta Younus