触摸触发回车键对应的event.code取值技术咨询

核心结论 #

Android触摸场景下，软键盘的回车按键对应的event.code通常还是"Enter"，但你的代码失效大概率是因为移动端软键盘的键盘事件触发逻辑和PC物理键盘不一致——部分Android浏览器/输入法不会触发keydown事件，或者事件属性存在差异。

问题分析 #

PC物理键盘的keydown事件在移动端软键盘场景下可能存在以下问题：

• 部分浏览器仅触发keyup而非keydown
• 少数输入法的回车按键会返回event.key = "Done"而非标准的"Enter"
• 极端场景下，软键盘输入可能不触发键盘事件，仅触发input/change事件

修复方案 #

1. 同时监听keydown和keyup事件，覆盖更多触发场景
2. 同时校验event.code和event.key，event.key的兼容性比event.code更好
3. 兼容输入法的"完成"按钮，部分软键盘的回车以"Done"作为event.key值

修改后的代码示例：

// 绑定多个事件
el.addEventListener('keydown', handleEnterTrigger);
el.addEventListener('keyup', handleEnterTrigger);

function handleEnterTrigger(ev) {
  ev.stopImmediatePropagation();
  // 兼容多种回车触发的情况
  const isEnterTrigger = ev.code === 'Enter' || ev.key === 'Enter' || ev.key === 'Done';
  if (isEnterTrigger) {
    // 执行你的保存逻辑
    // ...
  }
}

极端场景备选方案 #

如果上述方案仍不生效（比如某些定制输入法），可以监听input事件，检查输入内容是否包含换行符：

el.addEventListener('input', (ev) => {
  if (ev.target.value.includes('\n')) {
    // 移除换行符并执行保存
    ev.target.value = ev.target.value.replace('\n', '');
    // 你的保存逻辑
    // ...
  }
});

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