拦截 input 元素上的 keydown 事件

Question

我有一个由 <input /> 个字段组成的多页表单。除了表单之外，我还有一组通过自定义挂钩实现的“热键”（window.attachEventListener("keydown", handler) 监听 Alt + Key 组合。例如 Alt + N 将导航到表单的下一页)

我遇到的问题是，如果用户将焦点放在 <input /> 上，然后尝试启动热键 (Alt + N)，<input /> 仍会收到 ˜ 触发热键前的字符。

我试过使用捕获模式，event.preventDefault()、event.stopPropagation()和event.stopImmediatePropagation()都没有用。有什么方法可以防止表单中的 <input /> 元素收到 Alt + Key 击键？

使用热键挂钩

export const useHotkey = (key: HotkeyTrigger, onTrigger: () => void) => {
  useEffect(() => {
    const handleTriggerKey = (event: KeyboardEvent) => {
      if (event.altKey && event.code === `Key${key}`) {
        // event.preventDefault();
        // event.stopPropagation();
        // event.stopImmediatePropagation();
        onTrigger();
      }
    };

    window.addEventListener("keydown", handleTriggerKey);

    return () => {
      window.removeEventListener("keydown", handleTriggerKey);
    };
  }, [key, onTrigger]);
};

编辑：Codesandbox

Answer 1

我有一个解决方法，当您使用热键时，从输入中移除焦点。

export const useHotkey = (
  key: string,
  onTrigger: () => void,
  document: any // Add this parameter 
) => {
  useEffect(() => {
    const handleTriggerKey = (event: KeyboardEvent) => {
      if (event.altKey && event.code === `Key${key}`) {
        document.getElementsByTagName("input")[0].blur();//Add this line
        onTrigger();
      }
    };

    window.addEventListener("keydown", handleTriggerKey);

    return () => {
      window.removeEventListener("keydown", handleTriggerKey);
    };
  }, [key, onTrigger]);
};

并按如下方式调用您的函数：

useHotkey("N", () => console.log("Triggered"), document);

我希望这能为您解决问题。

拦截 input 元素上的 keydown 事件

Intercept keydown event on input element

input

dom-events

reactjs