[HTML] onkeypress, onkeyup, onkeydown 사용법

onKeydown(KeyCode 값) : 사용자가 키보드의 키를 눌렀을 때

onKeyup(KeyCode 값) : 사용자가 키보드의 키를 눌렀다가 땠을 때

onKeyPress(ASCII 값) : 사용자가 키보드의 키를 눌렀을 때

 

 

 

정확히 어떤 경우에 발생하는지 알아보기 쉬운방법은 함수를 하나 만들어 테스트 해본다.

function keyevent() {
    var keycode = event.keyCode;
   alert(keycode);   
}

onkeydown <input type="text" onkeydown="keyevent(this);">
onkeyup <input type="text" onkeyup="keyevent(this);">
onkeyPress <input type="text" onkeyPress="keyevent(this);">

 

테스트  ↓

onkeydown onkeyup onkeyPress

 

 

테스트를 해보면 onkeyup 은 value(텍스트)가 입력된 후 이벤트가 실행된다.

반대로 onkeydown과 onkeyPress은 value(텍스트)가 입력되기전에 이벤트가 실행된다.

 

또한 onKeyPress는 ASCII 값으로 사용되서 shift, ctrl 같은 키는 인식하지 못한다.

 

 

2016/12/09 - [JAVA Script] - keycode 표