Firefox下Keypress事件Backspace键失效问题求助（附验证代码）

嘿，我帮你定位到问题所在了，也整理好了修复方案！

问题根源 #

你的输入验证代码在Firefox里退格键失效，核心原因是**keypress事件在不同浏览器中对控制键的处理不一致**：

• 在Chrome中，keypress不会触发Backspace（键码8）、Delete（键码46）这类控制键，所以这些编辑操作不会被你的阻止逻辑影响；
• 但Firefox中，keypress会触发这些控制键，而你的代码里的条件把键码8（Backspace）归到了key <48 || key>57的范围内，直接触发了event.preventDefault()，导致退格操作被阻止。

另外，原来的条件逻辑写得比较紧凑，可读性和维护性也可以优化一下。

修复后的代码 #

我把事件换成了keydown（跨浏览器对所有按键的处理更统一），同时在判断中排除了必要的控制键，还拆分了验证规则让逻辑更清晰：

$('#valueInput').keydown(function(event) {
    let key = event.keyCode || event.which;
    // 允许退格、删除、左右箭头这些编辑必需的控制键
    const allowedControlKeys = [8, 46, 37, 39];
    if (allowedControlKeys.includes(key)) {
        return; // 不阻止这些操作
    }

    const inputVal = $(this).val().toString();
    // 规则1：只能输入数字和小数点（同时兼容主键盘和小键盘的小数点）
    if ((key < 48 || key > 57) && key !== 190 && key !== 110) {
        event.preventDefault();
        return;
    }

    // 规则2：输入框中只能存在一个小数点
    if ((key === 190 || key === 110) && inputVal.includes('.')) {
        event.preventDefault();
        return;
    }

    // 规则3：小数点后最多允许输入8位数字
    if (inputVal.includes('.')) {
        const decimalPart = inputVal.split('.')[1];
        if (decimalPart && decimalPart.length >= 8) {
            event.preventDefault();
        }
    }
}).on('paste', function(event) {
    event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="valueInput" type="text" />

几个关键的优化点 #

• 换成keydown事件：彻底解决跨浏览器按键处理不一致的问题；
• 放开必要的控制键：让用户可以正常退格、删除、移动光标，保证编辑体验；
• 拆分验证规则：把你要求的三个验证逻辑拆成独立判断，不仅可读性更强，后续要调整规则也更方便；
• 兼容双键盘小数点：同时处理主键盘（键码190）和小键盘（键码110）的小数点输入，覆盖更多使用场景。

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