反应表单 onKeyDown 事件在移动设备中不起作用

Question

const handleTags = (e) => {
  if ((e.key === "Enter" || e.keyCode === 13) && e.target.value.trim() !== "") {
    e.preventDefault(); // Prevent form submission
    e.stopPropagation(); // Prevent event bubbling
    setTags([...tags, e.target.value.trim()]);
    e.target.value = "";
  }
};

      <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>

这是 React 中的一个函数，当我在输入文本框中键入标签，然后按 Enter 键时，它就会添加到标签状态。它在桌面上完美运行，但在移动设备上，当我按 Enter 键时，焦点从输入文本框更改为另一个表单元素，并且该功能未按预期运行。仅限手机

Answer 1

这可能与某些移动浏览器以不同方式解释“Enter”键有关，尤其是在表单中。

尝试在移动设备上阻止该行为以查看反应

    if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
  e.stopPropagation();
}