工业设备中Android Chrome 106输入框Enter键不触发keyup事件问题

问题原因 #

• Chrome 106及以上版本调整了表单输入框Enter键的默认行为：当输入框处于可聚焦序列时，按下Enter会自动跳转到下一个输入框，这个过程会中断当前输入框的keyup事件触发。
• 虚拟键盘触发的按键事件会被IME（输入法编辑器）拦截，导致keyCode始终返回229，这是浏览器处理虚拟输入的标准行为。

解决方案 #

1. 拦截Enter键的默认跳转行为 #

在keydown事件中阻止Enter键的默认行为，避免焦点自动切换，确保keyup事件能正常触发。

2. 用event.key替代keyCode判断回车键 #

keyCode已被废弃，高版本浏览器推荐使用event.key === 'Enter'来判断，同时避开IME导致的229问题。

3. 改用动态事件绑定 #

放弃内联onkeyup属性，用JavaScript动态绑定事件，更便于控制事件流和维护代码。

修改后的示例代码 #

<html>
<body>
FIELD 1 <input type="text" id="campo1" name="campo1"><br>
FIELD 2 <input type="text" id="campo2" name="campo2"><br>
FIELD 3 <input type="text" id="campo3" name="campo3"><br>

<script>
const inputs = document.querySelectorAll('input[type="text"]');

function testRoutine(name, event) {
    if (event.key === 'Enter') {
        alert(`KEY ENTER PRESSED ON ${name}`);
    }
}

inputs.forEach(input => {
    // 阻止Enter键默认跳转行为
    input.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
        }
    });

    // 绑定keyup事件处理逻辑
    input.addEventListener('keyup', function(e) {
        testRoutine(this.previousSibling.textContent.trim(), e);
    });
});
</script>
</body>
</html>

可选扩展：保留Enter键跳转焦点功能 #

如果需要按下Enter键既触发自定义逻辑，又跳转到下一个输入框，可以修改keydown事件的处理逻辑：

input.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        // 先触发自定义逻辑
        testRoutine(this.previousSibling.textContent.trim(), e);
        // 手动跳转到下一个输入框
        const nextInput = this.parentElement.nextElementSibling?.querySelector('input');
        if (nextInput) nextInput.focus();
    }
});

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