如何阻止输入非数字字符？keydown/keypress差异及IME问题求助

我写了一个NumberKey函数，用来限制输入框只能输入数字：

function NumberKey(event) {
    let charCode = event.which || event.keyCode;
    console.log(event.keyCode)
    if ((charCode >= 48 && charCode <= 57) || // 主键盘数字(0-9)
        (charCode >= 96 && charCode <= 105) || // 小键盘数字(0-9)
        (charCode >=112 && charCode <= 123)|| // F1~F12功能键
        charCode === 8 || // 退格键
        charCode === 9 || // Tab键
        charCode === 13|| // 回车键
        charCode === 37 || // 左箭头
        charCode === 39 || // 右箭头
        charCode === 46){ // 删除键
    }else{
    event.preventDefault();
    return false;
    }
}

但用不同方式绑定事件时，结果不一样：

• 绑定onkeydown="return NumberKey(event)"：可以输入带Shift的{%、无Shift的qwertyuipasdfgh'zxcvb.，而且IME输入法能输入非数字；
• 绑定onkeypress="return NumberKey(event)"：可以输入带Shift的!@#$%^&*()，IME输入法仍能输入非数字；
• 同时绑定两个事件：只能输入带Shift的%，IME输入法还是能输入非数字。

疑问 #

1. 为什么onkeydown和onkeypress事件会产生不同结果？
2. 为什么onkeypress只允许%输入，却阻止了其他特殊字符？

IME输入法的问题 #

IME输入不会触发常规按键事件，我试过以下方法都没用：

• 使用input type="password"：会隐藏输入内容，不适合手机号或ID输入；
• 已废弃的ime-mode:disabled属性；
• 监听compositionstart/compositionupdate/compositionend事件并调用event.preventDefault()：

document.addEventListener('DOMContentLoaded', function() {
    const inputElement = document.getElementById('yourInputElementId');
    inputElement.addEventListener('compositionstart', function(event) {
        event.preventDefault();
    });
    inputElement.addEventListener('compositionupdate', function(event) {
        event.preventDefault();
    });
    inputElement.addEventListener('compositionend', function(event) {
        event.preventDefault();
    });
});

• 正则表达式验证的两种写法：

function NumberKey(evt) {
    let charCode = evt.which || evt.keyCode;
    let charStr = String.fromCharCode(charCode);
    let numcheck = /^[a-zA-Zㄱ-ㅎ가-힣]$/;
    if (numcheck.test(charStr)) {
        evt.preventDefault();
        return false;  
    } else {
        return true;
    }
}

function NumberKey(evt) {
    let charCode = evt.which || evt.keyCode;
    let charStr = String.fromCharCode(charCode);
    let numcheck = /^[0-9]$/;
    if (numcheck.test(charStr)) {
        return true; 
    } else {
        evt.preventDefault();
        return false; 
    }
}

现在需要解决这些问题，求帮助！

关于onkeydown和onkeypress的差异 #

疑问1：两个事件结果不同的原因 #

• onkeydown：响应物理按键按下，keyCode/which对应物理按键编码，和Shift等修饰键无关。比如按住Shift按数字键1，keyCode仍是数字1的物理编码（49），属于你函数允许的48-57范围，因此不会被阻止，能输入!这类Shift+数字的符号；而字母键编码不在允许列表，理论上应被阻止，你描述能输入的情况，大概率是函数未显式返回true，导致浏览器默认行为未被正确控制。
• onkeypress：仅响应能产生可打印字符的按键，which对应字符的Unicode编码（部分旧浏览器keyCode仍为物理键编码）。如果你的浏览器在onkeypress时优先取keyCode，那么Shift+数字键的编码仍属于数字范围，会被允许输入符号；若取which（字符编码），则只有编码在允许列表的字符能通过。

疑问2：onkeypress仅允许%输入的原因 #

%的ASCII编码是37，刚好和你允许列表中左箭头的keyCode（37）重合。同时绑定两个事件时：

• onkeydown阶段：Shift+5的keyCode是53（数字5的物理编码），属于允许范围，不会被阻止；
• onkeypress阶段：%的字符编码是37，在你的允许列表中（charCode ===37），因此不会被阻止；
  而其他Shift+数字键的字符编码（比如!是33、@是64）不在允许列表，onkeypress阶段会被阻止，因此只有%能通过双重检查。

IME输入法问题的解决方案 #

IME属于组合输入，不触发常规按键事件，之前的方法无效是因为composition事件的preventDefault()无法阻断IME输入流程，正则验证依赖按键事件也不生效。推荐两种可靠方案：

方案1：input事件实时过滤 #

监听输入框的input事件，实时替换非数字内容，同时保留光标位置避免跳转：

const inputElement = document.getElementById('yourInputElementId');

inputElement.addEventListener('input', function(e) {
    const cursorPos = this.selectionStart;
    const originalValue = this.value;
    const filteredValue = originalValue.replace(/\D/g, '');
    
    if (filteredValue !== originalValue) {
        this.value = filteredValue;
        // 调整光标位置，匹配删除字符后的偏移
        this.selectionStart = this.selectionEnd = cursorPos - (originalValue.length - filteredValue.length);
    }
});

方案2：compositionend事件后置过滤 #

IME输入完成后会触发compositionend事件，此时统一清理非数字内容：

const inputElement = document.getElementById('yourInputElementId');

inputElement.addEventListener('compositionend', function(e) {
    this.value = this.value.replace(/\D/g, '');
});

适合不需要实时过滤，仅需在IME输入完成后修正内容的场景。

补充：优化按键事件逻辑 #

如果要保留按键限制，改用已标准化的event.key替代废弃的keyCode，避免编码混乱：

function NumberKey(event) {
    const allowedKeys = [
        '0','1','2','3','4','5','6','7','8','9',
        'Backspace','Tab','Enter','ArrowLeft','ArrowRight','Delete',
        'F1','F2','F3','F4','F5','F6','F7','F8','F9','F10','F11','F12'
    ];
    // 单独允许小键盘数字键
    if (event.key >= '0' && event.key <= '9' && event.location === 3) {
        return true;
    }
    return allowedKeys.includes(event.key);
}

绑定方式：

<input onkeydown="return NumberKey(event)">

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