[javascript] 키보드 입력시 event type - keydown과 keyup

[JS] 키보드 Event - onKeyDown(), onKeyUp() 함수

 

아래 event type을 통해 키보드의 key 입력을 감지하여 evnet handler 함수를 호출할 수 있으며 KeyCode 함께 사용가능함.

 

(1)onkeydown (또는 keydown)

키보드의 Key를 눌렀을 때 발생하는 Event 함수입니다. shift, alt, controll, capslock 등의 모든 key에 동작시 반응함. 한영 변환 key나 한자 key 등의 특수키는 인식하지 못함. 아래는 Event 발생시 Keycode Value 값을 console에 출력함.

 

①inputBox 요소에서 키보드 입력시

<div class="parent">
  <input type="text" class="val">
  <button id="btn">button</button>
</div>

<script>
let inputBox = document.querySelector('.val');
inputBox.addEventListener('keyup', function(){
  console.log('안녕') // console에 안녕 출력된다
});
</script>

②input 요소에서 enter key를 입력시 login() 함수 실행함.

<input type="password" onkeyup="enterkey();" type="text" >

function enterkey() {
  if (window.event.keyCode == 13) {
  // 엔터키가 눌렸을 때 실행할 내용
  login();}
}

 

input 태그의 onkeypress, onkeyup, onkeydown 속성

 

참고로 eventhandler 함수에서 event객체의 property로 key code를 조회할 수 있음.key code는 아래와 같음.

예를 들어 아래와 같이 입력하면 console에 keycode 출력된다.이 때 event 객체 별도로 정의할 필요 없음. 바로 사용 간으함.

<div class="parent">
  <input type="text" class="val">
  <button id="btn">button</button>
</div>

<script>
let inputBox = document.querySelector('.val');
inputBox.addEventListener('keyup', function(){
  console.log(event.keyCode)
});
</script>

물론 아래와 같이 event 객체(event handler의 유일한 매개변수)에 대해 이름 임의로 설정가능함.

<div class="parent">
  <input type="text" class="val">
  <button id="btn">button</button>
</div>

<script>
let inputBox = document.querySelector('.val');
inputBox.addEventListener('keyup', function(e){
  console.log(e.keyCode)
});
</script>

 

event key code

 

(2)onkeyup(또는 keyup)

키보드의 Key를 눌렀다가 땠을 때 발생하는 Event 함수입니다.