키보드 event

인터넷 사용중 input 박스를 보면 값을 입력하고 버튼을 눌러서 값을 보내는 경우도 있지만
키보드의 엔터만으로도 값을 보내는 경우도 있다
이번엔 키보드의 특정 버튼을 인식해서 함수가 발동하도록 만들어 보자.

<input type="text" id="todo-input" onkeydown="keyCodeCheck()">

const keyCodeCheck = function () {
    const InputValue = document.querySelector('#todo-input').value;
    console.log(InputValue)
}

위처럼 작성을 하게되면
onkeydown 효과로 인해 inputbox에 값이 입력 될 때 마다 keyCodeCheck 함수가 동작하게 된다

하지만 위 상태로면 값을 입력 할 때마다 함수가 동작하기에 실제 사용하기엔
쓸데없는 함수동작이 많아진다.
원하는 것은 지정한 '특정' 키를 입력했을 때만 동작하도록 하고싶은것.

현재 입력한 키보드 알아보기.

const keyCodeCheck = function () {
    console.log(window.event)
}

스크립트에 동작 내용을 window.event가 출력되도록 하고 동작 시켜보면

어떤 키가 입력되고 있는지 확인이 가능하다.

엔터 버튼을 눌렀을때 발생하는 이벤트
엔터의 키코드는 13

그렇다면 window.event.keyCode === 13 일때만 동작하도록 코드를 짜면 될 것이다.

const keyCodeCheck = function () {
  if (window.event.keyCode === 13){
    const InputValue = document.querySelector('#todo-input').value;
    console.log(InputValue)
  }
}

이런식으로 문자들을 입력할때는 콘솔에 출력이 없지만
엔터를 누르니 현재 입력한 값이 출력되는걸 볼 수있다.