SeouliteLab

jQuery .keypress() 메서드 이해하기: 키 입력 이벤트 처리하기 본문

프로그래밍

jQuery .keypress() 메서드 이해하기: 키 입력 이벤트 처리하기

Seoulite Lab 2024. 4. 3. 13:08

keypress() 메서드는 jQuery에서 사용되며, 키보드의 키를 누를 때 발생하는 이벤트를 처리하는 데에 사용됩니다. 이를 통해 사용자의 키 입력에 따른 동작을 감지하고 처리할 수 있습니다.

예제 1: 특정 키 눌림 감지하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .keypress() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).keypress(function(event){
      console.log("키 코드: " + event.which);
    });
  </script>
</head>
<body>
  <!-- 내용 생략 -->
</body>
</html>

설명: 이 예제에서는 문서 전체에 대해 키보드의 키 입력 이벤트를 감지하여 해당 키의 키 코드를 콘솔에 출력합니다.

예제 2: 문자 입력 감지하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .keypress() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).keypress(function(event){
      var char = String.fromCharCode(event.which);
      console.log("입력한 문자: " + char);
    });
  </script>
</head>
<body>
  <!-- 내용 생략 -->
</body>
</html>

설명: 이 예제에서는 문자를 입력할 때마다 입력한 문자를 콘솔에 출력합니다.

예제 3: 특정 키 입력에 따른 동작 처리하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .keypress() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).keypress(function(event){
      if (event.which === 13) {
        alert("Enter 키가 입력되었습니다.");
      }
    });
  </script>
</head>
<body>
  <!-- 내용 생략 -->
</body>
</html>

설명: 이 예제에서는 Enter 키가 입력될 때마다 알림을 표시합니다.

예제 4: 입력한 키에 대한 동작 처리하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .keypress() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).keypress(function(event){
      switch(event.which) {
        case 37:
          alert("왼쪽 화살표 키가 입력되었습니다.");
          break;
        case 38:
          alert("위쪽 화살표 키가 입력되었습니다.");
          break;
        case 39:
          alert("오른쪽 화살표 키가 입력되었습니다.");
          break;
        case 40:
          alert("아래쪽 화살표 키가 입력되었습니다.");
          break;
      }
    });
  </script>
</head>
<body>
  <!-- 내용 생략 -->
</body>
</html>

설명: 이 예제에서는 화살표 키가 입력될 때마다 해당 방향의 화살표 키에 대한 알림을 표시합니다.

예제 5: 특정 키 조합 입력 감지하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .keypress() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).keypress(function(event){
      if (event.ctrlKey && event.which === 83) {
        alert("Ctrl + S 조합이 입력되었습니다.");
      }
    });
  </script>
</head>
<body>
  <!-- 내용 생략 -->
</body>
</html>

설명: 이 예제에서는 Ctrl + S 조합이 입력될 때마다 알림을 표시합니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery .live() 메서드: 이벤트 위임을 통한 동적 요소 처리  (0) 2024.04.03
jQuery .keyup() 메서드 이해하기: 키보드 입력 종료 이벤트 처리하기  (0) 2024.04.03
jQuery .keydown() 메서드 이해하기: 키보드 이벤트 처리하기  (0) 2024.04.03
jQuery.ready() 메서드 이해하기: 문서 준비 이벤트 처리하기  (0) 2024.04.03
jQuery jQuery.proxy() 메서드 이해하기: 함수 컨텍스트 설정하기  (0) 2024.04.03
'프로그래밍' Related Articles more