JavaScript에서 특정 키 입력을 트리거하고 싶습니다.

소개

JavaScript Advent Calendar 2020 17일째의 기사입니다.

「마우스를 사용하지 않고 키보드만으로 조작해 효율 UP하고 있다!」라고 하는 사람이 일정 수 있을 것 같기 때문에, Web 어플리를 만든다면 키보드만으로도 조작할 수 있도록 할까라고 생각하고 있습니다.

만든 웹 앱에 ...

예를 들어 자작의 마크다운 메모 앱에 바로 가기 키로 조작하는 기능을 붙이고 싶다고 합니다.

"Windows라면 Ctrl + / 를, Mac이라면 Control + / 를 눌러 "마크다운 기법 목록"을 표시할 수 있도록 하고 싶다."

이벤트 얻기

뭔가 키보드의 키가 눌려진 것을 감지하는 것은 매우 간단합니다.

document.addEventListener('keydown', event => {
    // 変数eventの中身はKeyboardEventオブジェクト
    console.log(event);
});

뷰포트 내에 포커스가 닿으면 취득할 수 있습니다.

키를 식별하는 데 사용할 수 있는 KeyboardEvent 속성

key : Shift 키나 Option 키에 의한 변화를 고려해, 키를 나타내는 문자열을 돌려줍니다.

code : 누른 키 자체를 나타내는 문자열을 반환합니다. 다만 JIS 배열의 키보드에서는 [ 의 입력에 대해 "BracketRight" 가 출력되는 등 직관적이지 않습니다. 이번에는 이것을 사용합니다.

keyCode : 비추천. 키를 나타내는 고유한 숫자를 반환합니다.

which : 더 이상 사용되지 않습니다. keyCode와 같은 값이 출력됩니다.

charCode : 비추천. 2020년 12월 17일 현재 Chrome, Firefox, Mac Safari에서는 아무 키나 누르면 0이 출력됩니다.

어떤 키가 눌렸는지 알기

수중에 Apple Keyboard A1843 EMC 3138(JIS 배열)이 있었으므로, 어느 키를 눌러 어떤 출력을 얻을 수 있는지 조사해 보았습니다.

KeyboardEvent.code 의 취득 결과는 이하의 SVG 파일에 기재되어 있습니다.

코드 목록보기 (외부 사이트)

이번 경우는/(슬래시)이므로, event.code === "Slash" 로 판정을 할 수 있습니다.

게다가 Windows라면 Ctrl 키를, Mac라면 Control 키를 함께 누르고 있으면 event.ctrlKey 가 true가 되기 때문에, 그것도 조사합니다.

시도해보기

상당히 간단한 코드이지만 Chrome과 같은 개발자 도구로 쉽게 시도해 보세요.

document.addEventListener('keydown', event => {
    if (event.ctrlKey && event.code === 'Slash') {
        // 処理を書く
        console.log('control + / です');
    }
});

참고 링크

keyCode가 deprecated가되었습니다 | N E R

KeyboardEvent - Web API | MDN