addEventListener("keydown" 、でテキスト入力中は"keydown"が反応しないようにしたい

Question

前提

TypeScript

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• addEventListener("keydown" ・・・でテキスト入力中は"keydown"が反応しないようにしたい

発生している問題・エラーメッセージ

テキスト入力中も"keydown"が反応してしまう。

該当のソースコード

useEffect(() => {
    document.addEventListener("keydown", handleKeyDown, false);
    return () => removeEventListener("keydown", handleKeyDown, false);
  }, []);

const handleKeyDown = useCallback((e: { preventDefault: () => void; keyCode: number; }) => {
    if(e.keyCode === 80 ) return isOpen(p => !p); 
  }, []);

Comments

[int32_t]

「テキスト入力中」とはどういう状態のことなのか、もっと具体的に教えて下さい。

[ykykyk]

<input> に文字を入力している際です。
keyCode === 80は キーボードの「P」で、現状はinputに文字を入力すると「P」ボタンだけ入力できない状態です。

Answer 1

keydown イベントリスナの冒頭で、テキスト入力中と判断できたら即returnすればいいです。

「<input>がフォーカスされている」で判断するなら、if (documet.activeElement.tagName == 'INPUT') return;。
「何かがフォーカスされている」で判断するなら、if (document.activeElement != document.body) return; です。

Answer 2

"keydown" のイベント関数で、テキスト入力中は何もせず戻るようにすればいいのでは