계산이나 게임을 만들기 위해서는 숫자나 방향키 등 키보드 입력이 필요한 경우가 있습니다. JavaScript는 이같은 상황을 해결하기 위해 키보드 입력 이벤트를 지원합니다. 키보드 입력 이벤트를 추가하는 방법은 꽤 간단하지만 여러가지 권장하지 않는 상황이 있습니다. 이 튜토리얼에서는 2022년에 키보드 입력 이벤트를 추가하는 올바른 방법을 보여줍니다.
키보드 이벤트의 종류
키보드 이벤트를 추가하려면 document 객체에 다음 중 하나를 listen 하면 됩니다.
- keydown: 모든 키가 눌렸을 때 실행, 눌린 키의 코드 제공
- keypress: 문자, 숫자, 기호 등 출력 가능한 키가 눌렸을 때 실행
- keyup: 눌렸던 키가 놓아졌을 때
키가 눌릴 때 마다 이벤트 객체가 생성됩니다. 다음의 코드로 객체를 확인할 수 있습니다.
document.addEventListener('keydown', (event) => {
console.log(event);
});브라우저에서 위의 코드를 실행하고 콘솔창을 열면 키가 눌렸을 때 다음과 같은 출력을 볼 수 있습니다.
이 이벤트 객체는 각각의 키 입력을 제어할 수 있는 정보를 줍니다. 예를 들면 key와 code 속성을 통해 어떤 키가 눌렸는지 알 수 있습니다.
키보드 이벤트 제어하기
각각의 이벤트 객체는 키를 누름으로서 생성됩니다. 다음은 이중 가장 유용할만한 속성입니다.
- event.key: 눌린 키의 논리적인 값입니다.
- event.code: 키의 물리적위치에 기반한 값입니다.
다음의 예제로 눌린 키에서 생성된 값을 확인할 수 있습니다.
document.addEventListener('keydown', (event) => {
console.log("event.key = " + event.key + " " + "event.code = " + event.code);
});이 코드가 생성한 출력 결과입니다.
여기서 주의해야 하는 것은 event.key와 event.code 값이 항상 같지 않다는 것 입니다. 일반적인 키보드와 다른 키배열을 가지고 있는 키보드로 입력하면 key와 code의 의미가 다를 수 있습니다. 왜냐하면 event.code는 키보드상 키의 물리적 위치에 기반한 값을 생성하도록 돼있기 때문입니다. 좀 더 예측 가능한 결과를 얻기 위해서는 event.key를 사용하는 것을 권장합니다. (event.keyCode는 더이상 사용하지 않는 속성이므로 현대 브라우저에서 사용 시 정확한 결과를 보장할 수 없습니다.)
키보드 이벤트를 입력받아 출력하기
가장 간단한 방법은 키보드 입력을 받았을 때 event.key를 DOM에 추가하는 것 입니다.
document.addEventListener('keydown', (event) => {
document.body.append(event.key);
});
엔터키 입력
인풋창에 값을 입력하고 버튼을 따로 클릭하는 것 보다 값 입력 후 엔터를 눌러 실행하는 식의 화면을 만들고 싶을 때가 있습니다. 이 때는 event.key 속성이 Enter 라는 값을 가지는지 확인하면 됩니다.
<html>
<body>
<input id="input" type="text">
<button id="button" onclick="onClick()">SUBMIT</button>
<script>
const inputElement = document.querySelector('#input');
const buttonElement = document.querySelector('#button');
const onClick = () => {
alert(`button click: ${inputElement.value}`);
};
inputElement.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
onClick();
}
});
</script>
</body>
</html>
위 코드를 실행하면 단순히 인풋과 버튼이 있는 화면이 나옵니다. 여기서 인풋에 값을 입력하고 버튼을 누르면
alert이 뜨는 단순한 화면입니다. 여기서 인풋에 값을 넣고 엔터를 눌러 버튼을 클릭한 것과 동일한 효과를 내고 싶다면 인풋에 keydown 이벤트를 추가하고 엔터키가 눌렸을 때 버튼 실행 코드를 추가하면 다음과 같은 결과를 얻을 수 있습니다.
정리
숫자 계산이나 게임 등에 키보드 이벤트를 추가하면 UX를 크게 개선할 수 있습니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 fetch로 formdata post 보내기 (1) | 2022.09.01 |
|---|---|
| [express.js] post 받는 서버 만들기 (0) | 2022.09.01 |
| [javascript] 자바스크립트 배열 비교 방법 (compare two arrays) (1) | 2022.08.26 |
| [javascript] 자바스크립트 정규식으로 메일 주소 검증 (0) | 2022.08.02 |
| [javascript] 자바스크립트 배열에서 최대/최소 구하는 방법 (min, max) (0) | 2022.07.05 |
댓글