[Javascript] 자바스크립트 키보드 관련 이벤트(onkeydown, onkeyup, onkeypress)

키보드 관련 이벤트

- onkeyXXX

- 폼 관련 태그들만 사용한다.(포커스를 가지는 태그에만 적용 가능) + <a>

1. onkeydown

- 키를 눌렀을 때 발생

- 물리키에 반응

- 현재 눌린 문자와는 상관없이 물리적인 키에만 반응

2. onkeyup

- 키를 떼었을 때 발생     

3. onkeypress

- 키를 눌렀을 때 발생

- 현재 눌린 문자에 반응

- 문자 키에 반응

상황별 키보드 이벤트 예제들..

keydown 이벤트 등록

- 눌린 키의 문자코드값을 알고 싶은 경우 이벤트 등록..

txt1.onkeydown = function(){        

      console.log(event.keyCode); //문자코드값 : a -> 65

};

keyup 이벤트 등록

txt2.onkeyup = function() {

         console.log("keyup"); 

};

keypress 이벤트 등록

txt3.onkeypress = function() {

         console.log(event.keyCode);

};

- 현재 입력된 값이 사용되는 업무 >> keyup(*주*)

- 현재 입력된 값과 상관없는 경우 >>keydown(*주*),keyup

방향키 다운으로 브라우저 전체 배경색 바꿔보기

txt3.onkeydown=function(){  

      if(event.keyCode == 37){ //좌

      window.document.body.bgColor="red";

      }else if(event.keyCode == 38){//상

      window.document.body.bgColor="white";

      } else if(event.keyCode == 39){//우

      window.document.body.bgColor="blue";

      }else if(event.keyCode == 40){//하

      window.document.body.bgColor="green";

      }

};

금지어를 정해 유저가 사용한 경우 사용 못하도록 하는 예제

txt4.onkeyup = function() {

    //금지어 사용 불가(바보)

    if(txt4.value.indexOf("바보")>-1){

    //1.

    alert('금지어사용!!!!');

   

    //2.

    window.document.body.bgColor = "red";

    txt4.readOnly = true;

    alert('금지어를 사용했습니다. 삭제바랍니다. \n 계속하시려면 텍스트 박스를 더블클릭하세요.');

    txt4.ondblclick = function(){

    window.document.body.bgColor = "white";

        txt4.readOnly = false;

    };

   

    //3. 강제로 금지어 마스킹 > replace

     txt4.value=txt4.value.replace("바보","**");

   

    }   

};

특수키를 조합하여 이벤트를 발생시키는 상황

txt5.onkeydown = function() {

//특수키 조합

//event.ctrlKey

//event.altKey

//event.shiftKey

//Ctrl + Y(89)

alert(event.keyCode); //해당 키코드

if(event.keyCode == 89 && event.ctrlKey){

alert("통과");

}

};

전역이벤트 발생(페이지 내부에서 어떠한 경우든 발생)

- window 객체의 접근은 시점과 무관(언제든 접근 가능)

- window 객체의 이벤트는 전역 이벤트 동작

window.onkeydown = function() {

if(event.keyCode == 65){

alert("이벤트 발생");

}

};