키보드 이벤트
KeyboardEvent.type
keydown: 키보드 버튼을 누른 순간
keypress: 키보드 버튼을 누른 순간
keyup: 키보드 버튼을 눌렀다 뗀 순간
KeyboardEvent.key
이벤트가 발생한 버튼의 값
KeyboardEvent.code
이벤트가 발생한 버튼의 키보드에서 물리적인 위치
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>JS with Codeit</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>
<script src="keyboard-event.js"></script>
</body>
</html>css
#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);
}javascript
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);input태크를 클릭해서 키보드를 입력해보면 key와 property들이 각각 어떤 값을 담고있는지를 출력해주고 또 발생한 이벤트 타입에 맞게 스타일이 변하는 동작을 확인할 수 있다.
프론트엔드 4년차