[제이쿼리]- 키보드 이벤트 / 엔터 키를 누르면 클릭해서 제출한 것처럼 강제 이벤트를 발생 시키기

키보드 이벤트

 

키보드 이벤트는 키보드로 무언가를 입력하면 이벤트가 발생한다. 

종류로는 keyup, keydown, keypress 이벤트가 있다. 

---

keyup(), keydown(), keypress()

-  keyup

: 키보드에서 키를 눌렀다 뗐을 때 이벤트가 발생 ( 잘 쓰지 않음 )

 

- keydown / keypress

: 키보드에서 키를 눌렀을 때 이벤트가 발생

두 이벤트의 차이점은,

* keydown는 모든 키(한/영 키 제외)에 대해 이벤트를 발생시킨다. 

* keypress는 기능 키(esc, F1~F12, tab, 한/영, 방향키, home 등)을 제외한 글자 키에서만 이벤트를 발생 시킨다.  

또한 이벤트 핸들러에서 이벤트 객체의 속성을 이용하면 고유 키의 코드 값을 가져올 수 있다. 

이를 사용하여 단축키 등을 만들 수 있다. 

 

[기본형]
*나머지도 이벤트명만 다르고 기본형은 동일

- 단독
$('이벤트 대상요소').keydown(function(){ 코드 } )

- 그룹
$('이벤트 대상 요소').on(' keydown', function(){ 코드 })

-강제
$('이벤트 대상 요소'). keydown()

---

예제 1) 방향키를 누르면 해당 아스키코드를 문자로 변환해서 input태그에 출력하기 

 <p>

      <input type="text" name="keydirection" id="keydirection" />

    </p>

//html문서에서 키보드가 눌리면 keyEventFnc 함수가 실행

        $(document).on("keydown", keyEventFnc);

        function keyEventFnc(e) {

          let direct = "";

          console.log(e.keyCode);

          switch (e.keyCode) {

            case 37:

              direct = "left";

              break;

            case 38:

              direct = "top";

              break;

            case 39:

              direct = "right";

              break;

            case 40:

              direct = "bottom";

              break;

          }

          // 만약 direct이 true라면 아이디keydirection에 벨류값을 direct의 값으로 바꿔라

          if (direct) $("#keydirection").val(direct);

        }

 

 

---

예제 2) 엔터 키를 누르면 클릭해서 제출한 것처럼 강제 이벤트를 발생시키기

<a href="#" id="enterForm">제출하기</a>

 

    //a태그에 클릭 이벤트 넣기

        $("#enterForm").click(function (e) {

          e.preventDefault(); //기본이벤트 차단

          alert("제출이 완료되었습니다.");

        });

        //엔터키를 누르면 a태그에 클릭한 것처럼 이벤트를 발생시키기

        $(document).keydown(function (e) {

          console.log(e.keyCode); // 엔터키의 값을 반환한다. 엔터키는 13번이라고 출력됨. 

          if (e.keyCode == 13) {

            $("#enterForm").click(); //click 강제 이벤트

          }

        });