[JavaScript] 자바스크립트 키보드에서 입력된 키 정보 확인하기

121_자바스크립트 키보드에서 입력된 키 정보 확인하기

[적용]

• 입력된 키에 따라 처리를 분류하고 싶을 때

---

[문법]

속성	의미	타입
키보드이벤트.key	눌러진 키의 값	문자열
키보드이벤트.code	눌러진 버튼의 코드	문자열
키보드이벤트.altKey	눌러진 키 값 확인 (Alt 키 여부)	진리값
키보드이벤트.ctrlKey	눌러진 키 값 확인 (Ctrl 키 여부)	진리값
키보드이벤트.shiftKey	눌러진 키 값 확인 (Shift 키 여부)	진리값
키보드이벤트.metaKey	눌러진 키 값 확인 (meta 키* 여부)	진리값
키보드이벤트.repeat	현재 키의 눌러진 상태 확인	진리값
키보드이벤트.isComposing	입력 중 상태 확인**	진리값
키보드이벤트.keyCode	눌러진 키의 아스키(ASCII) 코드 값	숫자

* meta 키는 윈도우즈의 윈도우 키, 맥OS의 커맨드 키를 의미한다.

* 특수 기호 등 입력 변환 작업 중인 경우 true를 반환한다.

---

[내용]

KeyboardEvent 객체의 속성을 확인하면 입력된 키 값을 확인할 수 있다.keydown, keyup 이벤트와 함께 사용한다.다음을 확인해 보자.

/** 텍스트 영역 */
const textarea = document.querySelector('.textarea');

textarea.addEventListener('keyup', (event) => {
	// 입력 'a' 에 대한 결과 출력
    console.log(event.key);  // 'a'
    console.log(event.code);  // 'KeyA'
    console.log(event.altKey);  // false
    console.log(event.ctrlKey);  // false
    console.log(event.shiftKey);  // false
    console.log(event.metaKey);  // false
    console.log(event.repeat);  // false
    console.log(event.isComposing);  // false
});

 

입력된 키의 확인은 키의 코드 값을 사용한다.

window.addEventListener('keydown', handleKeydown);

function handleKeydown(event) {
	// 키 코드값 확인
    const keyCode = event.keyCode;
    // 조건문으로 제어
    if (key Code === 39) {
    	// → 키
        console.log('→ 키가 입력됨');
    }
    if (key Code === 37) {
    	// ← 키
        console.log('← 키가 입력됨');
    }
    if (key Code === 38) {
    	// ↑ 키
        console.log('↑ 키가 입력됨');
    }
    if (key Code === 40) {
    	// ↓ 키
        console.log('↓ 키가 입력됨');
    }
}

 

 

---

 

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김