React表单onKeyDown事件在移动端无法正常工作的问题咨询

这个问题本质是移动端虚拟键盘的「回车」键在不同浏览器/输入法里的键值标识不一样，而且默认会触发表单的焦点跳转甚至提交行为，导致你的handleTags逻辑没走完就被打断了。

修复方案 #

• 扩展按键判断范围：别只判断"Enter"，还要覆盖移动端常见的确认键值（比如"Go"、"Done"、"Next"）
• 优先阻止默认行为：把e.preventDefault()和e.stopPropagation()移到判断逻辑最前面，确保焦点不会提前跳转
• 阻止表单默认提交（如果input在form标签内）：给form添加阻止提交的逻辑，避免回车触发表单提交导致焦点丢失

修改后的handleTags函数

const handleTags = (e) => {
  // 覆盖移动端虚拟键盘的各类确认键
  const triggerKeys = ['Enter', 'Go', 'Done', 'Next'];
  if (triggerKeys.includes(e.key) && e.target.value.trim() !== "") {
    // 先阻止默认行为，避免焦点跳转或表单提交
    e.preventDefault();
    e.stopPropagation();
    setTags([...tags, e.target.value.trim()]);
    e.target.value = "";
  }
};

若input在form内，补充form的阻止提交逻辑

<form onSubmit={(e) => e.preventDefault()}>
  <div className="form-group">
    <label htmlFor="tags">Tags</label>
    <input
      type="text"
      name="tags"
      autoComplete="off"
      placeholder="type a tag and press enter"
      onKeyDown={handleTags}
      id="tags"
      required
      className="form-control"
    />
    {/* 其他表单元素 */}
  </div>
</form>

为什么这么改？ #

1. 移动端虚拟键盘的确认键并非统一返回"Enter"，不同平台/输入法会返回"Go"、"Done"等不同值，扩展判断范围才能覆盖所有情况
2. 先执行阻止默认行为，能确保焦点不会立刻跳转到其他表单元素，让添加标签的逻辑完整执行
3. 若input包裹在form中，回车默认会触发表单提交，这也是导致焦点跳转的常见原因，必须阻止form的默认提交行为

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