event.keyCode 예제(키 입력 감지)

이번 예제는 Javascript로 키 입력을 보여주는 예제입니다. 예제의 조건은 다음과 같습니다.

1. 키보드를 누르면 input태그 안에 char와 keyCode가 나타난다.
2. 백스페이스와 F5키를 무효화해서 char와 keyCode가 나타나도록 한다

아래는 예제를 완성시킨 모습입니다.

아무 키나 입력해보세요.

char

keycode

Alt키

Ctrl키

Shift키

코드 내용

<div style='border:1px solid red; width:50%; margin-left:25%; text-align:center;' onkeydown='on_key_down()'> <h3><input type="button" value="여기를 클릭하고"> 아무 키나 입력해보세요.</h3> <p>char <input type='text' id='keychar' /></p> <p>keycode <input type='text' id='keycode' /></p> <p>Alt키 <input type='checkbox' id='altkey' /></p> <p>Ctrl키 <input type='checkbox' id='ctrlkey' /></p> <p>Shift키 <input type='checkbox' id='shiftkey' /></p> </div> <script> function on_key_down() { var keycode = event.keyCode; if ( keycode == 8 // 백스페이스 || keycode == 116 // F5 ) event.returnValue = false; // 브라우저 기능 키 무효화 document.getElementById('keychar').value = String.fromCharCode( keycode ); document.getElementById('keycode').value = keycode; document.getElementById('altkey').checked = event.altKey; document.getElementById('ctrlkey').checked = event.ctrlKey; document.getElementById('shiftkey').checked = event.shiftKey; } </script>