티스토리 뷰

Javascript

Javascript와 JQuery에서 엔터키 값 체크하기

travelpark 2023. 6. 28. 00:40
반응형

웹에서 자주 사용하는 기능 중 하나가 바로 엔터키 값 체크입니다. 텍스트 박스에서 뭔가를 입력하고 엔터키를 누르면 버튼을 클릭해야 실행되는 이벤트를 실행하는 경우가 상당히 많습니다. Javascript와 JQuery에서 엔터키 값 체크하는 방법을 예제를 통해 한 번 알아보겠습니다.

<!DOCTYPE html>
<html>
<head>
  <title>엔터키 값 체크</title>
  <style>
    .change-color1 {
      background-color: #FF0000;
    }
	
    .change-color2 {
      background-color: #FFE400;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    function checkEnter1(event) {
      var myInput = document.getElementById("myInput1");

      if (event.keyCode == 13) {
        myInput.classList.toggle("change-color1");
      }
    }

    function checkEnter2(event) {
      if (event.keyCode == 13) {		  
        $("#myInput2").toggleClass("change-color2");
      }		
    }	
  </script>
</head>
<body>
  <input type="text" id="myInput1" onkeydown="checkEnter1(event)">
  <input type="text" id="myInput2" onkeydown="checkEnter2(event)"> 
</body>
</html>

먼저 event.keyCode는 사용자가 키보드를 사용하여 키를 누를 때 발생하는 이벤트에서 눌린 키에 대한 정보를 나타내는 속성입니다. 이 속성값이 13인 경우 엔터키를 눌렀다고 인식하기 때문에 위 예제에서 Javascript와 JQuery 함수에 동일하게 사용했습니다,


onkeydown은 JavaScript에서 사용되는 이벤트 속성 중 하나로, 키보드에서 키를 누를 때 발생하는 이벤트를 처리하기 위해 사용됩니다. 위 예제에서는 onkeydown 이벤트를 사용해 id가 myInput1 인 경우에는 checkEnter1 함수를 id가 myInput2 인 경우에는 checkEnter2 함수를 실행하고 있습니다.

 

텍스트 박스에 커서를 두고 엔터값을 누르면 각 함수에서 toggle을 사용해 텍스트 박스의 배경색을 바꿔줍니다. 클릭 이벤트가 발생할 때마다 각 클래스가 추가되거나 제거되어 배경색이 변경됩니다. 이 예제를 이해하면 엔터키 값을 입력할 때 다른 페이지로 넘어가거나 메세지를 띄워주거나 값을 변경해주는 용도로 응용할 수 있습니다.

반응형

'Javascript' 카테고리의 다른 글

Javascript와 JQuery로 체크박스 전체선택해제 하기  (0) 2023.06.20
Javascript와 JQuery로 체크박스 선택된 값 가져오기  (0) 2023.06.14
Javascript로 모바일 체크 하는 법(navigator.userAgent)  (0) 2023.06.10
Javascript에서 윈도우 이모지(Windows Emoji) 체크하는 방법  (0) 2023.06.09
Javascript로 iframe에서 부모창 함수 제어하기  (0) 2022.06.16
Javascript 와 JQuery에서 iframe 내부 함수 접근 방법  (0) 2022.06.14
Javascript 와 JQuery 에서 focus()로 포커스 이동하기  (0) 2022.05.24
공유하기 링크
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함