[책] 자바스크립트 코드 레시피 278 - 110일차

키보드 입력 이벤트 처리하기

• 문자를 입력할 때 마다 작업을 실행하고 싶을 때

구문

keydown 키를 누르는 시점
keyup 누른 키를 떼는 시점
keypress 문자 키가 눌려진 시점

설명

keydown keyup keypress 는 키 입력을 감시하는 이벤트로, 각각의 이벤트가 발생하는 시점이 다릅니다. 다음 샘플을 확인합니다.

실습 1

document.addEventListener('.textarea').addEventListener('keydown', () => {
  console.log('키가 눌려졌습니다.');
});

document.addEventListener('.textarea').addEventListener('keypress', () => {
  console.log('문자가 입력되었습니다.');
});

document.addEventListener('.textarea').addEventListener('keyup', () => {
  console.log('키 눌림이 해제되었습니다.');
});

실습 2

index.html

<textarea class="textarea"></textarea>
<p>현재 <span class="string-num">0</span>문자를 입력 중입니다.</p>

---

script.js

const textArea = document.querySelector('.textarea');
const stringNum = document.querySelector('.string-num');

textArea.addEventListener('keyup', onKeyUp);

function onKeyUp() {
  const inputText = textArea.value;
  stringNum.innerText = inputText.length;
}

입력된 키 정보 확인하기

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

구문

키보드이벤트.key 눌러진 키의 값
키보드이벤트.code 눌러진 버튼의 코드
키보드이벤트.altKey 눌러진 키 값 확인 (alt 키 여부)
키보드이벤트.ctrlKey 눌러진 키 값 확인 (ctrl 키 여부)
키보드이벤트.shiftKey 눌러진 키 값 확인 (shift 키 여부)
키보드이벤트.metaKey 눌러진 키 값 확인 (meta 키 여부)
키보드이벤트.repeat 현재 키의 눌러진 상태 확인
키보드이벤트.isComposing 입력 중 상태 확인
키보드이벤트.keyCode 눌러진 키의 아스키 (ASCII) 코드 값
※ meta 키는 윈도우즈의 윈도우 키, 맥OS의 커맨드 키다.
※ 특수 기호 등 입력 변환 작업 중인 경우 true를 변환한다.

설명

KeyborderEvent 객체의 속성을 확인하면 입력된 키 값을 확인할 수 있다. keydown, keyup 이벤트와 함께 사용합니다. 실습을 해봅니다.

실습 1

이벤트 keydown, keyup 타입 값 확인하는 코드

const textArea = document.querySelector('.key-textarea');
textArea.addEventListener('keyup', (event) => {
  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
  console.log(event.keyCode); // 65
});

실습 2

입력된 키의 확인은 키의 코드 값을 사용합니다. 숫자로 코드의 값을 나타냅니다.

window.addEventListener('keydown', handleKeydown);
function handleKeydown(event) {
  const keyCode = event.keyCode;

  if (keyCode === 39) {
    console.log('" → " 방향키 입력되었습니다.');
  }
  if (keyCode === 37) {
    console.log('" ← " 방향키 입력되었습니다.');
  }
  if (keyCode === 38) {
    console.log('" ↑ " 방향키 입력되었습니다.');
  }
  if (keyCode === 40) {
    console.log('" ↓ " 방향키 입력되었습니다.');
  }
};