키 확인

키보드 키를 눌러보세요

"> 09-11_keyboard

키 확인

키보드 키를 눌러보세요

"> 09-11_keyboard

키 확인

키보드 키를 눌러보세요

<!-- 09_event/09-11_keyboard.html -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09-11_keyboard</title>
<script type="text/javascript">
	/*
		# 키 이벤트
		- onkeydown
		  > 키가 눌렸을 때 이벤트가 발생합니다
		  
		  onkeyup
		  > 눌러진 키를 떼었을 때 이벤트가 발생합니다
	*/
</script>
<style type="text/css">
#key {
	width: 100px;
	height: 30px;
	font-size: 30px;
	font-weight: bold;
}
div {
	background-color: yellow;
	width: 300px;
	height: 120px;
	margin-top: 20px;
}

</style>
</head>
<body>
	<h1>키 확인</h1>
	<p>키보드 키를 눌러보세요</p>
	<input type="text" id="key" onkeydown="whatKey(event)" autocomplete="off"/>
	<br/><br/>
	<div id="keyboard"></div>
	<!-- javascript -->
	<script type="text/javascript">
		function whatKey(e){
			let stn = '';
			let div = document.getElementById('keyboard');
			div.innerHTML = '';
			stn += 'key     : ' + e.key + '<br/><br/>';
			stn += 'code    : ' + e.code + '<br/><br/>';
			stn += 'keyCode : ' + e.keyCode + '<br/><br/>';
			div.innerHTML=stn;
		}
	</script>
</body>
</html>