반응형
▼ HTML, CSS, JavaScript 문서
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<input type="text" id="my-input"/>
<div class="events">
<div id="keydown" class="event">keydown</div>
<div id="keypress" class="event">keypress</div>
<div id="keyup" class="event">keyup</div>
</div>
<div class="events">
<div id="key" class="event">key</div>
<div id="code" class="event">code</div>
</div>
<div id="keyboard">
<div class="function-keys">
<div id="Escape" class="key">Esc</div>
<div class="row">
<div id="F1" class="key">F1</div>
<div id="F2" class="key">F2</div>
<div id="F3" class="key">F3</div>
<div id="F4" class="key">F4</div>
</div>
<div class="row">
<div id="F5" class="key">F5</div>
<div id="F6" class="key">F6</div>
<div id="F7" class="key">F7</div>
<div id="F8" class="key">F8</div>
</div>
<div class="row">
<div id="F9" class="key">F9</div>
<div id="F10" class="key">F10</div>
<div id="F11" class="key">F11</div>
<div id="F12" class="key">F12</div>
</div>
</div>
<div class="main-keys">
<div class="row">
<div id="Backquote" class="key">`</div>
<div id="Digit1" class="key">1</div>
<div id="Digit2" class="key">2</div>
<div id="Digit3" class="key">3</div>
<div id="Digit4" class="key">4</div>
<div id="Digit5" class="key">5</div>
<div id="Digit6" class="key">6</div>
<div id="Digit7" class="key">7</div>
<div id="Digit8" class="key">8</div>
<div id="Digit9" class="key">9</div>
<div id="Digit0" class="key">0</div>
<div id="Minus" class="key">-</div>
<div id="Equal" class="key">=</div>
<div id="Backspace" class="key">BackSpace</div>
</div>
<div class="row">
<div id="Tab" class="key">Tab</div>
<div id="KeyQ" class="key">Q</div>
<div id="KeyW" class="key">W</div>
<div id="KeyE" class="key">E</div>
<div id="KeyR" class="key">R</div>
<div id="KeyT" class="key">T</div>
<div id="KeyY" class="key">Y</div>
<div id="KeyU" class="key">U</div>
<div id="KeyI" class="key">I</div>
<div id="KeyO" class="key">O</div>
<div id="KeyP" class="key">P</div>
<div id="BracketLeft" class="key">[</div>
<div id="BracketRight" class="key">]</div>
<div id="Backslash" class="key">\</div>
</div>
<div class="row">
<div id="CapsLock" class="key">CapsLock</div>
<div id="KeyA" class="key">A</div>
<div id="KeyS" class="key">S</div>
<div id="KeyD" class="key">D</div>
<div id="KeyF" class="key">F</div>
<div id="KeyG" class="key">G</div>
<div id="KeyH" class="key">H</div>
<div id="KeyJ" class="key">J</div>
<div id="KeyK" class="key">K</div>
<div id="KeyL" class="key">L</div>
<div id="Semicolon" class="key">;</div>
<div id="Quote" class="key">'</div>
<div id="Enter" class="key">Enter</div>
</div>
<div class="row">
<div id="ShiftLeft" class="key">Shift</div>
<div id="KeyZ" class="key">Z</div>
<div id="KeyX" class="key">X</div>
<div id="KeyC" class="key">C</div>
<div id="KeyV" class="key">V</div>
<div id="KeyB" class="key">B</div>
<div id="KeyN" class="key">N</div>
<div id="KeyM" class="key">M</div>
<div id="Comma" class="key">,</div>
<div id="Period" class="key">.</div>
<div id="Slash" class="key">/</div>
<div id="ShiftRight" class="key">Shift</div>
</div>
<div class="row">
<div id="ControlLeft" class="key">Ctrl</div>
<div id="MetaLeft" class="key">Meta</div>
<div id="AltLeft" class="key">Alt</div>
<div id="Space" class="key">Space</div>
<div id="AltRight" class="key">Alt</div>
<div id="MetaRight" class="key">Meta</div>
<div id="ControlRight" class="key">Ctrl</div>
<div class="block">
<div class="row">
<div></div>
<div id="ArrowUp" class="key">↑</div>
<div></div>
</div>
<div class="row">
<div id="ArrowLeft" class="key">←</div>
<div id="ArrowDown" class="key">↓</div>
<div id="ArrowRight" class="key">→</div>
</div>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>#my-input {
width: 200px;
height: 30px;
font-size: 20px;
}
.events {
display: flex;
justify-content: space-between;
width: 333px;
height: 34px;
margin: 10px 0;
border: 1px solid #333333;
border-left: 0;
}
.event {
width: 50%;
padding: 5px;
text-align: center;
line-height: 28px;
border-left: 1px solid #333333;
}
.check {
color: #ffffff;
}
#keydown.check {
background-color: #eb2f2f;
}
#keypress.check {
background-color: #0cb30c;
}
#keyup.check {
background-color: #2757f5;
}
.function-keys {
display: flex;
justify-content: space-between;
width: 700px;
margin-bottom: 10px;
}
.main-keys {
display: flex;
flex-flow: row wrap;
width: 700px;
height: 300px;
}
.row {
display: flex;
justify-content: space-between;
}
.main-keys > .row {
width: 100%;
}
.key {
width: 43px;
height: 43px;
margin: 1px;
text-align: center;
line-height: 47px;
border: 1px solid #333333;
border-radius: 3px;
box-shadow: none;
transform: translateY(0);
}
#Backspace,
#Tab {
width: 79px;
}
#CapsLock,
#Enter {
width: 86px;
}
#ShiftLeft,
#ShiftRight {
width: 110px;
}
#ControlLeft,
#ControlRight,
#AltLeft,
#AltRight,
#MetaLeft {
width: 50px;
}
#Space {
width: 284px;
}
.on {
color: #ffffff;
background-color: #7e7e7e;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
transform: translateY(1px);
}const myInput = document.querySelector('#my-input');
const key = document.querySelector('#key');
const code = document.querySelector('#code');
function onkeyEvent(e) {
const eventBtn = document.querySelector(`#${e.type}`);
eventBtn.classList.add('check');
const el = document.querySelector(`#${e.code}`);
el.classList.add('on');
if (e.type === 'keyup') {
el.classList.remove('on');
} else if (e.type === 'keydown') {
key.textContent = `key: ${e.key}`;
code.textContent = `code: ${e.code}`;
}
setTimeout(function() {eventBtn.className = 'event'}, 300);
}
myInput.addEventListener('keydown', onkeyEvent);
myInput.addEventListener('keypress', onkeyEvent);
myInput.addEventListener('keyup', onkeyEvent);키보드 이벤트 - keyboardEvent Type
키보드로 할 수 있는 이벤트 타입은 mousedown과 mouseup 처럼
key를 누르는 순간에 발생하는 keydown과 keypress와
key를 눌렀다 뗀 순간에 발생하는 keyup이 존재한다.
그리고 키보드 이벤트가 발생했을 때 자주 사용되는 이벤트 객체의 프로퍼티는 'key'와 'code'이며
각 이벤트 타입과 프로퍼티들이 어떤 특징을 가지고 있는지 확인해보자
▼ 이벤트 객체의 프로퍼티 - key , code
키보드 왼쪽 상단에 input 태그를 클릭해서 키를 입력해보면
key와 code 프로퍼티들이 각각 어떤 값을 담고 있는지 출력해주고
발생한 이벤트 타입에 맞게 스타일도 변하고 있다.
key프로퍼티는 키보드에 있는 key를 누를 때 사용자가 어떤 값을 가진 key를 눌렀는지 알려주는 것이 key 프로퍼티이다.
이미지에 나와있는 key:a 라는 것은 알파벳 소문자 a가 입력되는 key가 눌린것이고
아래의 키보드 모양에서 강조되는 것처럼
사용자가 키보드에서 어떤 위치에 있는 key를 알려주는 것이 code 프로퍼티이다.
그래서 대문자 A와 소문자 a를 입력했을 때
key값은 다르지만 code 값은 같은 경우도 있고
왼쪽 shift와 오른쪽 shift를 번갈아 눌러보면
key 값은 같지만 code 값은 서로 다른 경우도 있으니
각 프로퍼티가 어떤 값을 가지는지 명확하게 이해하고 필요한 상황에 따라 활용할 수 있다.
▼ 이벤트 타입 keydown, keypress, keyup
키보드 이벤트 타입으로는 키보드 버튼을 누를때 keydown, keypress 이벤트가 발생하고
키보드 버튼을 떼는 순간에는 keyup 이벤트가 발생한다.
사실 키보드 이벤트 타입은 이게 전부이지만 주의해야할 부분이 있다.
keypress는 알파벳이나 숫자 혹은 스페이스바로 띄어쓰기를 한 것과 같이
출력값이 변하는 key 에서만 이벤트가 발생하고
esc나 shift처럼 기능적인 역할을 하는 key에는 이벤트가 발생하지 않는다.
그리고 하나의 key를 계속 누르고 있는 상황에서 keypress는 한 번만 발생하고
keydown 이벤트만 연속적으로 발생한다.
출력이 가능한 key더라도 영어가 아닌 한글로 key를 입력하면 반응하지 않는 문제도 있다.
상황에 따라서 이러한 특징을 의도적으로 활용한다거나
언젠가 keypress 이벤트를 접할 수도 있기 때문에 참고하면 좋겠지만
keypress 이벤트는 웹 표준에서 권장하지 않는 방법이기 때문에
key를 누르는 순간에 동작할 이벤트가 필요하다면 keypress보다는 keydown 이벤트를 사용하는 것이 좋다.
정리하자면 주로 사용되는 이벤트 타입과 프로퍼티가 두 가지 밖에 되지 않기 때문에
생각보다 단순하지만 실제로 키보드에는 많은 종류의 버튼이 있기에 다양한 상황이 존재할 수 있다.
키보드 이벤트를 어떠한 상황에 활용할 수 있을지, 어떤 타입의 이벤트와 프로퍼티를 활용하면 좋을지
생각해볼 필요가 있다.
반응형
'JS' 카테고리의 다른 글
| (22) Interactive JavaScript (Event) - 스크롤 이벤트 (0) | 2024.11.18 |
|---|---|
| (21) Interactive JavaScript (Event) - input 태그 (0) | 2024.11.15 |
| (19) Interactive JavaScript (Event) - 마우스 이동 이벤트 (0) | 2024.11.13 |
| (18) Interactive JavaScript (Event) - 마우스 버튼 이벤트 (0) | 2024.11.12 |
| (17) Interactive JavaScript (Event) - 브라우저의 기본 동작 제어 (0) | 2024.11.11 |