.png)
keypress는 deprecated되었다.
최신버전에서 더 이상 지원하지않을 수 있으므로 사용하지 않는 것을 권장한다.
🍿 event.preventDefault()
🥨 keydown
input.addEventListener('keydown', (event) => {
if(event.key === 'a') {
event.preventDefault();
}
}a눌렀을 때 a는 input창에 써지지 않는다.
🥨 keyup
input.addEventListener('keyup', (event) => {
if(event.key === 'a') {
event.preventDefault();
}
}a가 작성된다.
키보드에서 손을 떼고 이미 브라우저에서 이벤트를 처리한 다음
keyup되었을 때 이벤트를 취소해도 취소가 되지 않는다.
🍿 KeyboardEvent.isComposing
읽기전용 속성으로, composition 세션에서 해당 이벤트가 실행되었는지 여부를 boolean 값으로 반환한다.
🥨 keydown
input.addEventListener('keydown', (event) => {
if (event.isComposing) {
return;
}
if(event.key === 'Enter') {
onSubmit();
}
};엔터를 눌렀을 때 특정 글자가 두 번 입력된다.
이럴땐 event.isComposing을 사용해주면 된다.
한글처럼 여러번의 keydown을 이용해 한 글자를 만들 때는 중간에 이벤트가 발생하는 경우가 있다.
글자가 만들어지는 중간에 발생하는 이벤트는 무시하고, 이벤트가 끝난 뒤 발생하는 enter이벤트에 대해서만 처리를 하도록 만든다.
🥨 keyup
여러번의 키를 이용해 글자를 쓸 때는
input.addEventListener('keydown', (event) => {
if(event.key === 'Enter') {
onSubmit();
}
};Reference
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.