Firefox浏览器输入框Backspace键失效问题求助

这个问题我之前也碰到过，核心原因是你写的onkeypress事件逻辑只放行数字字符，但没考虑到不同浏览器对控制键（比如Backspace、Delete）的事件触发规则差异——Firefox里，onkeypress对Backspace这类非字符键的处理和Chrome/IE不一样，直接把它们也给拦截了。

问题根源 #

大多数人写数字输入限制时，会只判断输入的字符是否是0-9，但忽略了：

• Chrome和IE中，Backspace在onkeypress事件中会被识别为有效键，不会被拦截；
• 但Firefox里，onkeypress事件对于Backspace这类控制键，不会触发字符输入的逻辑，你的代码可能直接返回false阻止了所有非数字键，包括Backspace。

解决方案：放行必要的控制键 #

修改你的事件处理函数，先判断当前按下的是控制键（比如Backspace、Delete、Tab、箭头键等），如果是就直接放行；再对字符键做数字校验。

方案1：优化onkeypress事件处理

function allowOnlyNumbers(e) {
    // 兼容IE的事件对象
    const event = e || window.event;
    const charCode = event.charCode || event.keyCode;

    // 放行常用控制键：Backspace(8)、Delete(46)、Tab(9)、方向键(37-40)
    const allowedControlKeys = [8, 9, 37, 38, 39, 40, 46];
    if (allowedControlKeys.includes(charCode)) {
        return true;
    }

    // 校验是否是数字字符（0-9的charCode范围是48-57）
    const inputChar = String.fromCharCode(charCode);
    return /^\d$/.test(inputChar);
}

把这个函数绑定到你的input的onkeypress事件上，Firefox里就能正常用Backspace了。

方案2：改用onkeydown事件（兼容性更好）

onkeydown对所有按键（包括控制键）的触发更一致，跨浏览器兼容性更好，推荐用这个方案：

function allowOnlyNumbers(e) {
    const event = e || window.event;
    const keyCode = event.keyCode;

    // 放行控制键
    const allowedControlKeys = [8, 9, 37, 38, 39, 40, 46];
    if (allowedControlKeys.includes(keyCode)) {
        return true;
    }

    // 校验数字键：主键盘(48-57)、小键盘(96-105)
    return (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105);
}

绑定到input的onkeydown事件即可，这样所有浏览器的表现都会一致。

额外补充：处理粘贴场景 #

如果用户通过右键粘贴非数字内容，上面的事件处理拦不住，建议再加一个onpaste事件：

function blockNonNumericPaste(e) {
    const event = e || window.event;
    const clipboardData = event.clipboardData || window.clipboardData;
    const pastedText = clipboardData.getData('text');
    // 如果粘贴的内容不是纯数字，阻止粘贴
    if (!/^\d*$/.test(pastedText)) {
        event.preventDefault();
    }
}

这样就能全方位限制输入为数字，同时保证所有浏览器的操作体验一致。

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