如何限制<input>输入框仅允许用户输入1-31范围内的数字？

针对现有<input maxlength="2">输入框，要实现仅允许输入1至31之间的数字，可以结合HTML属性与JavaScript验证完成，以下是具体实现步骤：

1. 基础HTML设置 #

先将输入框类型设为number，同时指定基础范围限制——虽然HTML自带的min/max无法完全阻止用户输入不符合规则的内容，但能提供浏览器原生的上下箭头控制：

<input type="number" maxlength="2" id="dayInput" min="1" max="31" placeholder="输入1-31的数字">

2. 实时输入验证（核心处理） #

通过input事件监听用户输入，实时修正内容，确保输入值在1-31范围内，同时限制长度不超过2位：

const dayInput = document.getElementById('dayInput');

dayInput.addEventListener('input', function() {
  let inputValue = this.value.trim();
  // 过滤非数字字符
  if (!/^\d*$/.test(inputValue)) {
    this.value = inputValue.replace(/\D/g, '');
    inputValue = this.value;
  }
  
  const numValue = parseInt(inputValue);
  // 修正输入范围
  if (!isNaN(numValue)) {
    if (numValue < 1) {
      this.value = 1;
    } else if (numValue > 31) {
      this.value = 31;
    }
  }
  // 强制限制长度（解决number类型maxlength失效问题）
  if (this.value.length > 2) {
    this.value = this.value.slice(0, 2);
  }
});

3. 按键过滤（可选优化） #

添加keydown事件，阻止用户输入非数字字符，进一步优化输入体验：

dayInput.addEventListener('keydown', function(e) {
  // 允许数字键、退格、删除、方向键及快捷键（如Ctrl+C）
  const allowedKeys = ['0','1','2','3','4','5','6','7','8','9','Backspace','Delete','ArrowLeft','ArrowRight'];
  if (!allowedKeys.includes(e.key) && !e.ctrlKey && !e.metaKey) {
    e.preventDefault();
  }
});

4. 提交时最终验证 #

如果输入框在表单内，建议在表单提交时再做一次验证，避免绕过前端实时验证的情况：

document.querySelector('form').addEventListener('submit', function(e) {
  const inputValue = parseInt(dayInput.value);
  if (isNaN(inputValue) || inputValue < 1 || inputValue > 31) {
    alert('请输入1-31之间的有效数字');
    e.preventDefault(); // 阻止表单提交
  }
});

注意：部分浏览器中，type="number"的maxlength属性不会生效，所以必须通过JavaScript手动处理长度限制；同时要考虑用户复制粘贴非数字内容的情况，实时过滤非数字字符是必要的。

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