반응: 브라우저 키보드 단축키 재정의

브라우저에는 많은 단축키가 있습니다. 이러한 바로 가기를 재정의하려면 어떻게 해야 합니까?

import { useEffect } from "react";

function App() {
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.ctrlKey && e.key === "1") {
        alert("shortcut");
      }
    };
    window.addEventListener("keyup", handler);

    return () => {
      window.removeEventListener("keyup", handler);
    };
  }, []);

  return <div className="App">App</div>;
}

export default App;

keypress 는 ctrl + Key 와 같은 복잡한 단축키에서 작동하지 않으므로 keyup 를 사용했습니다.

이 코드는 바로 가기ctrl + 1를 누를 때 경고를 생성합니다. 하지만 ctrl + 1는 첫 번째 탭으로 이동하기 위해 예약된 키이기 때문에 작동하지 않습니다.

이 경우 preventDefault에서 keydown를 사용하여 기본 바로 가기를 무시할 수 있습니다.

import { useEffect } from "react";

function App() {
  useEffect(() => {
    const ctrl1 = (e: KeyboardEvent) => e.ctrlKey && e.key === "1";

    const handler = (e: KeyboardEvent) => {
      if (ctrl1(e)) {
        alert("shortcut");
      }
    };

    const ignore = (e: KeyboardEvent) => {
      if (ctrl1(e)) {
        e.preventDefault();
      }
    };

    window.addEventListener("keyup", handler);
    window.addEventListener("keydown", ignore);

    return () => {
      window.removeEventListener("keyup", handler);
      window.removeEventListener("keydown", ignore);
    };
  }, []);

  return <div className="App">App</div>;
}

export default App;

바인딩하려는 키가 눌리면 preventDefault를 호출합니다. 기본 동작을 방지합니다.

그러나 ctrl + R(새로 고침)과 같은 일부 키는 재정의할 수 없습니다.

그리고 원한다면 이것을 구성 요소로 만들 수 있습니다.

import { useEffect } from "react";

const Ctrl1 = ({ onPress }: { onPress: VoidFunction }) => {
  useEffect(() => {
    const ctrl1 = (e: KeyboardEvent) => e.ctrlKey && e.key === "1";

    const handler = (e: KeyboardEvent) => {
      if (ctrl1(e)) onPress();
    };

    const ignore = (e: KeyboardEvent) => {
      if (ctrl1(e)) e.preventDefault();
    };

    window.addEventListener("keyup", handler);
    window.addEventListener("keydown", ignore);

    return () => {
      window.removeEventListener("keyup", handler);
      window.removeEventListener("keydown", ignore);
    };
  }, []);

  return null;
};

function App() {
  return (
    <div className="App">
      <Ctrl1 onPress={() => alert("pressed ctrl1")} />
      App
    </div>
  );
}

export default App;

논리는 같지만 React 방식에 더 가깝다고 생각합니다.

그게 다야. 이 게시물을 읽어 주셔서 감사합니다.
좋은 코딩 :)