如何设置文本输入框的可选值范围为1-10？

嘿，我来帮你搞定这个输入限制的问题！首先得说清楚：你用的是type="text"的输入框，max属性对它根本没用——这个属性只对type="number"的输入框生效，这就是为啥之前设置了也没效果~

下面给你几个靠谱的解决方案，按需选就行：

方案1：保留text类型，用JS实时验证（推荐） #

既然你用了掩码来限制数字输入，那咱们在这个基础上再加一层数值范围的验证，实时拦截不符合要求的输入。代码如下：

// 先初始化你的掩码
function maskFormatterForLvl(val) { 
  $(val).mask("ZZ", { 
    translation: { 
      'Z': { pattern: /[0-9]/, optional: true } 
    } 
  });
}
maskFormatterForLvl('#level');

// 新增实时范围验证
$('#level').on('input', function() {
  let inputVal = $(this).val();
  // 转成数字，处理空值情况
  let num = parseInt(inputVal);
  
  if (isNaN(num)) {
    // 输入非数字或空，清空内容
    $(this).val('');
  } else if (num < 1) {
    // 小于1，自动修正为1
    $(this).val('1');
  } else if (num > 10) {
    // 大于10，自动修正为10
    $(this).val('10');
  }
});

这个代码的逻辑很简单：用户每输入一个字符，就立刻检查数值范围，不符合的直接修正成合法值，从根源上杜绝无效输入。

方案2：改成number类型，结合原生属性+JS兜底 #

如果业务允许把输入框改成type="number"，那这个方法更省心——浏览器自带的控件会帮你限制范围，再加上JS兜底防止用户手动输入非法值：

HTML代码 #

<input type="number" name="level" id="level" min="1" max="10" step="1">

补充JS兜底验证 #

const levelInput = document.getElementById('level');
levelInput.addEventListener('change', function() {
  let num = parseInt(this.value);
  // 防止用户手动输入超出范围的数值
  if (num < 1) this.value = 1;
  if (num > 10) this.value = 10;
});

这样既利用了浏览器的原生限制，又通过JS做了兜底，双重保障~

为啥之前的掩码不管用？ #

你的掩码只限制了输入内容是数字、最多两位，但没有判断数值的大小范围——比如用户输入"11"，掩码会允许，但它超过了10的上限，所以必须再加一层范围验证才行。

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