SeouliteLab

jQuery event.which 속성 이해하기: 키 코드 식별하기 본문

프로그래밍

jQuery event.which 속성 이해하기: 키 코드 식별하기

Seoulite Lab 2024. 4. 3. 08:10

event.which 속성은 jQuery에서 이벤트 핸들러 내에서 호출되었을 때, 사용자가 누른 키의 키 코드를 나타냅니다. 이를 통해 특정 키가 눌렸는지를 식별하고 해당 키에 대한 작업을 수행할 수 있습니다.

예제 1: 기본 사용법 - 키보드 이벤트

<!DOCTYPE html>
<html>
<head>
  <title>event.which 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(document).on("keydown", function(event){
        alert("눌린 키의 키 코드: " + event.which);
      });
    });
  </script>
</head>
<body>
  <!-- 아무 곳이나 클릭한 후 키를 누르세요 -->
</body>
</html>

출력 결과: 눌린 키의 키 코드: (누른 키의 키 코드)

설명: 이 예제에서는 사용자가 키를 누르면 해당 키의 키 코드가 알려집니다.

예제 2: 화살표 키 식별하기

<!DOCTYPE html>
<html>
<head>
  <title>event.which 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(document).on("keydown", function(event){
        if (event.which === 37) {
          alert("왼쪽 화살표 키가 눌렸습니다.");
        } else if (event.which === 38) {
          alert("위쪽 화살표 키가 눌렸습니다.");
        } else if (event.which === 39) {
          alert("오른쪽 화살표 키가 눌렸습니다.");
        } else if (event.which === 40) {
          alert("아래쪽 화살표 키가 눌렸습니다.");
        }
      });
    });
  </script>
</head>
<body>
  <!-- 아무 곳이나 클릭한 후 화살표 키를 누르세요 -->
</body>
</html>

출력 결과: 화살표 키에 따라 메시지가 나타납니다.

설명: 이 예제에서는 사용자가 화살표 키를 누를 때 각 화살표 키에 대한 메시지가 나타납니다.

예제 3: 특정 키만 허용하기

<!DOCTYPE html>
<html>
<head>
  <title>event.which 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(document).on("keydown", function(event){
        if (event.which !== 65 && event.which !== 66 && event.which !== 67) {
          event.preventDefault();
          alert("A, B, C 키만 입력 가능합니다.");
        }
      });
    });
  </script>
</head>
<body>
  <!-- 아무 곳이나 클릭한 후 A, B, C 키 이외의 키를 누르세요 -->
</body>
</html>

출력 결과: A, B, C 키 이외의 키를 누를 때 경고창이 나타납니다.

설명: 이 예제에서는 사용자가 A, B, C 키 이외의 키를 누를 경우 입력을 막고 경고창을 띄웁니다.

예제 4: 마우스 이벤트와의 조합

<!DOCTYPE html>
<html>
<head>
  <title>event.which 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").on("click", function(event){
        alert("클릭된 마우스 버튼의 키 코드: " + event.which);
      });
    });
  </script>
</head>
<body>
  <button>클릭하세요</button>
</body>
</html>

출력 결과: 클릭된 마우스 버튼의 키 코드: 1

설명: 이 예제에서는 버튼을 클릭할 때 클릭된 마우스 버튼의 키 코드를 알려줍니다.

예제 5: 입력 제한하기 - 숫자만 입력 가능하도록

<!DOCTYPE html>
<html>
<head>
  <title>event.which 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("input").on("keydown", function(event){
        // 숫자(0-9) 허용
        if ((event.which < 48 || event.which > 57) && event.which !== 8 && event.which !== 46) {
          event.preventDefault();
        }
      });
    });
  </script>
</head>
<body>
  <input type="text" placeholder="숫자만 입력하세요">
</body>


</html>

설명: 이 예제에서는 입력 필드에 숫자만 입력 가능하도록 설정했습니다. 숫자 이외의 키 입력은 막힙니다.

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

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

jQuery .focus() 메서드 이해하기: 요소에 포커스 주기  (0) 2024.04.03
jQuery focus 이벤트 이해하기: 요소에 포커스가 들어왔을 때 처리하기  (0) 2024.04.03
jQuery event.type 속성 이해하기: 이벤트 유형 식별하기  (0) 2024.04.03
jQuery event.timeStamp 속성 이해하기: 이벤트 발생 시간 파악하기  (0) 2024.04.03
jQuery event.target 속성 이해하기: 이벤트가 발생한 요소 식별하기  (0) 2024.04.03
'프로그래밍' Related Articles more