본문 바로가기

프로그램/javascript

html dom 의 key event 정리

반응형

목적

onkeydown 과 onkeypress와 onkeyup 에 대해 알아보자


정의


내용

onkeydown => 키보드의 키를 누르는 중 발생

key event 순서는

1. onkeydown

2. onkeypress

3. text input

4. onkeyup


keyeown 은 키가 눌릴떄

keyup은 키가 띄었을떄

keypress는 누르고 띄었을떄 라고 함


샘플


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>babolsk</title>

<script type="text/javascript">


var getEvt=function(e) {

e=window.event||e;

var kc=e.keyCode || k.which;

console.log('event name:'+e.type); //event name

console.log('key code:'+e.keyCode); //key code

console.log('key value:'+String.fromCharCode(e.keyCode)); //key code 에 해당하는 value

};

window.onload=function() {

document.getElementById('num01').onkeydown=getEvt;

document.getElementById('num01').onkeypress=getEvt;

document.getElementById('num01').onkeyup=getEvt;

};

</script>

</head>

<body>

<h1>javascript 테스트</h1>

<div>key event 확인</div>

<ul>

<li><input id="num01" type="text"></li>

</ul>

</body>

</html>