[JavaScript] 키보드 이벤트 총정리 (keypress, keyup, keydown)

728x90

목 차

• 1. 자바스크립트 키보드 이벤트란?
• 2. 키보드 이벤트 유형
  • 2-1. keydown
  • 2-2. keypress
  • 2-3. keyup
• 3. 기본 키보드 이벤트 속성
  • 3-1. key
  • 3-2. code
  • 3-3. keyCode
  • 3-4. altKey
  • 3-5. ctrlKey
  • 3-6. shiftKey
  • 3-7. metaKey
• 4. 기본 동작 제어
  • 4-1. preventDefault()
  • 4-2. stopPropagation()
• 5. 사용 예제
  • 5-1. 키 입력 방지
  • 5-2. 특정 키 조합 방지 (단축키 구현)
  • 5-3. 입력 필드의 실시간 문자 감지
  • 5-4. 방향키 감지
  • 5-5. Caps Lock 감지
  • 5-6. Enter 키로 폼 제출 방지
  • 5-7. 백스페이스로 페이지 이동 방지

 

1. 자바스크립트 키보드 이벤트란?

JavaScript의 키보드 이벤트는 사용자가 키보드를 통해 특정 키를 눌렀을 때 발생하는 이벤트를 처리할 수 있도록 도와줍니다. 키보드 이벤트는 주로 입력 폼, 단축키 설정, 게임 인터페이스 등에서 사용됩니다.

 

---

 

 

2. 키보드 이벤트 유형

2-1. keydown

• 키를 누르는 순간 발생합니다.
• 키가 눌려있는 동안 반복적으로 발생합니다.
• 모든 키에 대해 동작(예: Shift, Ctrl, Alt 포함).

 

2-2. keypress

• 키를 눌렀을 때 발생했지만, 현재는 사용하지 않는 이벤트입니다.
• 대신 keydown 또는 keyup을 사용해야 합니다.

 

 

2-3. keyup

• 키에서 손을 떼는 순간 발생합니다.
• 키의 최종 상태를 처리하거나 실행 취소 동작을 구현할 때 유용합니다.

 

---

 

 

3. 기본 키보드 이벤트 속성

키보드 이벤트 객체(event)를 통해 다양한 정보를 얻을 수 있습니다.

 

3-1. key

• 눌린 키의 이름을 문자열로 반환.
• 예: 'a', 'Enter', 'ArrowUp'.

document.addEventListener("keydown", (event) => {
  console.log(event.key); // 눌린 키 이름 출력
});

 

3-2. code

• 키보드에서 물리적 위치에 따라 반환되는 값.
• 예: 'KeyA', 'Enter', 'ArrowUp'.
• 키보드 레이아웃에 상관없이 키의 위치를 구별할 때 유용합니다.
•  

 

 

3-3. keyCode

• 키의 고유한 숫자 코드. 현재는 key와 code를 사용 권장.
• 예: 65 (A의 keyCode).

 

3-4. altKey

• Alt 키가 함께 눌렸는지 여부를 반환(true/false).
• 예: event.altKey.

 

 

3-5. ctrlKey

• Ctrl 키가 함께 눌렸는지 여부를 반환.

 

3-6. shiftKey

• Shift 키가 함께 눌렸는지 여부를 반환.

 

 

3-7. metaKey

• Meta 키(Mac의 Command 키 또는 Windows 키)가 눌렸는지 여부를 반환.

 

---

 

 

4. 기본 동작 제어

4-1. preventDefault()

• 키보드 이벤트의 기본 동작을 막습니다.
• 예: 폼 제출 방지.

document.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    event.preventDefault(); // Enter 기본 동작 방지
    console.log("Enter key disabled.");
  }
});

 

4-2. stopPropagation()

• 이벤트가 상위 요소로 전파되는 것을 막습니다.

 

---

 

 

5. 사용 예제

5-1. 키 입력 방지

document.addEventListener("keydown", (event) => {
  console.log(`Key pressed: ${event.key}`);
});

 

5-2. 특정 키 조합 방지 (단축키 구현)

document.addEventListener("keydown", (event) => {
  if (event.ctrlKey && event.key === "s") {
    event.preventDefault(); // 브라우저의 기본 저장 기능 방지
    console.log("Ctrl + S pressed!");
  }
});

 

 

5-3. 입력 필드의 실시간 문자 감지

document.addEventListener("keydown", (event) => {
  if (event.ctrlKey && event.key === "s") {
    event.preventDefault(); // 브라우저의 기본 저장 기능 방지
    console.log("Ctrl + S pressed!");
  }
});

 

5-4. 방향키 감지

document.addEventListener("keydown", (event) => {
  switch (event.key) {
    case "ArrowUp":
      console.log("Up arrow pressed");
      break;
    case "ArrowDown":
      console.log("Down arrow pressed");
      break;
    case "ArrowLeft":
      console.log("Left arrow pressed");
      break;
    case "ArrowRight":
      console.log("Right arrow pressed");
      break;
    default:
      console.log("Other key pressed");
  }
});

 

 

5-5. Caps Lock 감지

document.addEventListener("keydown", (event) => {
  if (event.getModifierState("CapsLock")) {
    console.log("Caps Lock is ON");
  } else {
    console.log("Caps Lock is OFF");
  }
});

 

5-6. Enter 키로 폼 제출 방지

document.getElementById("form").addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    event.preventDefault();
    console.log("Enter key submission prevented");
  }
});

 

5-7. 백스페이스로 페이지 이동 방지

document.addEventListener("keydown", (event) => {
  if (event.key === "Backspace" && !event.target.matches("input, textarea")) {
    event.preventDefault();
    console.log("Backspace navigation prevented");
  }
});