[Javascript] onkeydown 속성을 이용한 예제

WEB/자바스크립트

[Javascript] onkeydown 속성을 이용한 예제

춘햄 2021. 5. 14. 16:16

input 태그의 onkeydown 속성을 이용하여, 키보드 키가 눌렸을 때 특정 동작이나 연산을 수행하게끔 할 수 있다.

예제는 keyHandler 함수를 작성하여 직전에 누른 키의 값과 코드를 출력하도록 구현했다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>keycode</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <style>
      #wrapper {
        width:300px;
        margin:0 auto;
        text-align: center;
      }
      input {
        width:100px;
        margin:10px 20px;
      }
      p#keyCodeValue {
        font-size:26px;
        color:blue;
      }
    </style>
  </head>
  <body>
  	<div id = "wrapper">
  		<p>텍스트 필드에 키보드 값 입력</p>
  		<form>
  			<input onkeydown = "keyHandler(event); event.preventDefault()" readonly />
  			<!--  event.preventDefault() = 이벤트가 발생하기 직전 코드로 돌아가라 -->
  		</form>
  		<p>눌린 키 : <span id = "codeValue"></span></p>
  		<p>눌린 키 코드: <span id = "keyCodeValue"></span></p>
  	</div>
  	
  	<script>
  		function keyHandler(evt) {
  			var code = evt.code;
  			var keyCode = (evt.keycode) ? evt.keycode : evt.which;
  			
  			document.querySelector("#codeValue").innerText = code;
  			document.querySelector("#keyCodeValue").innerText = keyCode;
  		}
  	</script>
  </body>
</html>