移动端number类型输入框maxlength限制异常（Android可输入特殊字符）

我之前也碰到过类似的Android端number输入框的坑，给你几个实用的解决办法：

1. 优化输入框属性，从源头限制键盘类型 #

number类型输入框本身允许正负号，加上Android系统键盘默认会提供这些符号选项，光靠maxlength根本镇不住。给输入框加上这两个属性，能强制调出纯数字键盘，减少用户输入符号的可能：

<input type="number" maxlength="11" inputmode="numeric" pattern="[0-9]*" id="phoneInput">

• inputmode="numeric"：告诉浏览器调出纯数字键盘
• pattern="[0-9]*"：配合表单验证，同时辅助浏览器识别输入规则

2. 监听输入事件，实时过滤内容并限制长度 #

就算键盘还有漏网的符号，我们用JS实时处理输入内容，只留数字且截断到11位，连粘贴带符号的内容也能处理：

const input = document.getElementById('phoneInput');

input.addEventListener('input', function(e) {
    // 过滤所有非数字字符
    let cleanValue = e.target.value.replace(/[^0-9]/g, '');
    // 超过11位就截断
    if (cleanValue.length > 11) {
        cleanValue = cleanValue.slice(0, 11);
    }
    e.target.value = cleanValue;
});

3. 额外拦截按键（可选） #

有些Android浏览器还是会顽固显示符号键，再加个keydown事件，直接阻止非数字的输入按键，不过要给回退、箭头这些控制按键留活路：

input.addEventListener('keydown', function(e) {
    const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
    // 不是控制键且不是数字的话，阻止输入
    if (!allowedKeys.includes(e.key) && isNaN(Number(e.key))) {
        e.preventDefault();
    }
});

补充：为什么原来的maxlength不生效？ #

maxlength属性对type="number"的输入框兼容性很差，尤其是Android端的浏览器，基本不会严格遵守这个长度限制，所以必须结合JS做强制控制才行。

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