키보드 이벤트 타입 KeyboardEvent.type
- keydown : 키보드 버튼을 누른 순간 / 키보드를 꾹 누르고 있을 때 한번만 실행됨
a = 65, A = 65 동일한 값이 보여짐 - keypress : 키보드 버튼을 누른 순간 / 키보드를 누르고 있을 때 계속 실행됨
a = 97, A = 65 다른 값이 보여짐 - keyup : 키보드 버튼을 눌렀다 뗀 순간 / 한글처리 가능 / 현재 누른 값을 가지고 있음
a = 65, A = 65 동일한 값이 보여짐 - Ctrl, Alt, Shift 키 등은 keydown에서는 작동하고, keypress에서는 작동하지 않음
키보드 이벤트 프로퍼티
- KeyboardEvent.key : 이벤트가 발생한 버튼의 값
- KeyboardEvent.code : 이벤트가 발생한 버튼의 기보드에서 물리적인 위치
키보드 이벤트 사용 예시
html
<body>
<img class="background" src="imgs/background.png">
<div class="container">
<div class="header">
<button class="back-btn">
<img src="imgs/left-arrow.png" width="30" height="30">
</button>
<img class="profile-pic" src="imgs/profile.png" width="40" height="40">
<div class="info-block">
<p class="username">썸남</p>
<p class="status">1시간 전에 활동</p>
</div>
<div class="call-box">
<button>
<img src="imgs/phone-call.png" width="20" height="20">
</button>
<button>
<img src="imgs/video-call.png" width="20" height="20">
</button>
</div>
</div>
<div id="chat-box">
<div class=" bubble friend-bubble">
안녕하세요.
</div>
<div class=" bubble friend-bubble">
저는 뚝딱입니다.
</div>
<div class=" bubble friend-bubble">
자바스크립트 잘 하고 싶어요.
</div>
</div>
<div class="footer">
<textarea id="input" placeholder="메시지를 입력하세요." autofocus="true"></textarea>
<button id="send">
<img src="imgs/send.png" width="24" height="24">
</button>
</div>
</div>
<script src="index.js"></script>
</body>
js
const chatBox = document.querySelector('#chat-box');
const input = document.querySelector('#input');
const send = document.querySelector('#send');
function sendMyText() {
const newMessage = input.value;
if (newMessage) {
const div = document.createElement('div');
div.classList.add('bubble', 'my-bubble');
div.innerText = newMessage;
chatBox.append(div);
} else {
alert('메시지를 입력하세요...');
}
input.value = ''; //이 코드가 실행된 후 텍스트 박스 초기화 시키기
}
send.addEventListener('click', sendMyText);
function sendMyTextByEnter(e) {
if (e.key === 'Enter' && !e.shiftKey) {
//shift키 눌렀을 때 텍스트 박스 안에서 줄바꿈 일어나게 하기
//shift키와 enter를 같이 눌렀을 때 전송이 실행 안 되도록 하기
sendMyText();
e.preventDefault(); //enter만 쳤을 때 줄바꿈 일어나지 않게 하기
}
}
input.addEventListener('keypress', sendMyTextByEnter)
잠깐만! ✋🏼
영어는 하나의 버튼에 하나의 값이 입력되어 있다.
하지만, 한국어의 자음과 모음의 결합처럼 여러 버튼을 눌러서 하나의 입력 값을 만들 수 있는 언어들도 있다.
이런 언어들은 화면에 입력중인 문자 바로 아래에 작은 밑줄이 나타난다.
만약 keyup, keydown 타입으로 이벤트 핸들러를 등록한 후에 그 밑줄이 보이는 상황에서 enter나 esc, 혹은 방향키와 같은 키보드 버튼을 누를 경우, 해당 버튼에 대한 이벤트가 2번 중복해서 반응한다.
왜냐하면 글자가 조합 중인지, 조합이 완료된 것인지 쉽게 파악하기 어렵기 때문이다.
그래서 이렇게 특별한 상황에 따라서는 keypress가 필요할 수도 있다는 점 기억하자.
728x90
'코딩도 합니다 > JS' 카테고리의 다른 글
| [자바스크립트 js / 실무 기록] input값 초기화 (0) | 2021.05.16 |
|---|---|
| [자바스크립트 js] input 태그 / input 태그 종류 / 포커스 이벤트 / 입력 이벤트 (0) | 2021.05.16 |
| [자바스크립트 js] mouseenter / mouseleave VS mouseover / mouseout (0) | 2021.05.16 |
| [자바스크립트 js] 마우스 이동 이벤트 / MouseEvent.위치프로퍼티 (0) | 2021.05.11 |
| [자바스크립트 js] 마우스 버튼 이벤트 / MouseEvent.button / MouseEvent.type (0) | 2021.05.11 |