JavaScript 키 입력 받기

1 개요[ | ]

자바스크립트에서 키 입력 받기
자바스크립트 키 후킹

예제: http://zetawiki.com/ex/js/key_input.php
아래 소스에는 onkeydown에 구현했지만, onkeypress, onkeyup 에서도 구현 가능

다만 결과가 조금 다르다. 예를 들어 keypress의 경우 대소문자가 구별된다.

또 백스페이스나 F5 키를 무효화하는 것은 onkeydown에 구현해야 한다.^[1]

onkeydown을 body 태그에 걸지 않고, window.onkeydown을 사용하는 방법도 있음

2 소스코드[ | ]

<body onkeydown='on_key_down()'>
<input type='text' placeholder='아무 키나 입력해보세요.' />
<br>char <input type='text' id='keychar' />
<br>keycode <input type='text' id='keycode' />
<br>Alt키 <input type='checkbox' id='altkey' />
<br>Ctrl키 <input type='checkbox' id='ctrlkey' />
<br>Shift키 <input type='checkbox' id='shiftkey' />
</body>

<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>

3 같이 보기[ | ]

4 주석[ | ]

↑ refresh는 F5 keydown 즉시 발동한다...

[1] refresh는 F5 keydown 즉시 발동한다...

[1]