如何限制number类型输入框的字符长度为5-9位？

针对number类型输入框无法用maxlength、range属性实现5-9位数字限制的问题，提供两种可行方案：

方案1：number类型结合JS实时限制 #

通过HTML属性控制数值范围，搭配JavaScript实时清理无效输入并截断长度：

修改后的HTML代码 #

<div class="usernumber">
    <input type="number" 
           placeholder="Type a 5-9 digit number" 
           style="color:rgb(134, 136, 130)"
           min="10000" 
           max="999999999"
           oninput="limitDigits(this)">
</div>

对应的JavaScript函数 #

function limitDigits(input) {
    // 过滤掉非数字字符，避免输入正负号、小数点等
    input.value = input.value.replace(/[^0-9]/g, '');
    // 截断超过9位的内容
    if (input.value.length > 9) {
        input.value = input.value.slice(0, 9);
    }
}

说明：

• min="10000"和max="999999999"确保输入数值落在5-9位数字的范围内；
• 实时监听输入事件，清理非数字内容并限制最大长度，避免用户输入不符合要求的内容。

方案2：用text类型模拟数字输入（更简洁） #

如果可以接受用text类型模拟数字输入体验，这种方案原生支持maxlength，同时通过属性确保数字键盘调用和格式验证：

<div class="usernumber">
    <input type="text" 
           placeholder="Type a 5-9 digit number" 
           style="color:rgb(134, 136, 130)"
           inputmode="numeric"
           pattern="[0-9]{5,9}"
           maxlength="9"
           required>
</div>

说明：

• inputmode="numeric"让移动端自动调出数字键盘，保持number输入的体验；
• pattern="[0-9]{5,9}"用于表单提交时的原生验证，确保输入是5-9位数字；
• maxlength="9"直接限制输入长度不超过9位，无需额外JS处理。

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