[JavaScript] 자바스크립트 키보드 입력 이벤트 처리하기

120_자바스크립트 키보드 입력 이벤트 처리하기

[적용]

• 문자를 입력할 때마다 잡억을 실행하고 싶을 때

---

[문법]

이벤트	발생 타이밍
keydown	키를 누르는 시점
keyup	누를 키를 뗴는 시점
keypoess	문자 키가 눌려진 시점

---

[내용]

keydown, keyup, keypress 는 키 입력을 감시하는 이벤트로,

각각의 이벤트가 발생하는 시점이 다르다.

다음 샘플을 확인해 보자.

 

HTML                                                                                                                                                              index.html

<textarea class="textarea"></textarea>

JavaScript                                                                                                                                                          main.js

document.querySelector('.textarea').addEventListener('keydown', () => {
	console.log('키가 눌러졌습니다.');
});

document.querySelector('.textarea').addEventListener('keypress', () => {
	console.log('문자가 입력되었습니다.');
});

document.querySelector('.textarea').addEventListener('keyup', () => {
	console.log('키 눌림이 해제되었습니다.');
});

 

---

[예시]

텍스트 영역에서 입력 중인 문자의 수를 카운트하는 샘플을 확인해 보자.

 

HTML                                                                                                                                                              index.html

<textarea class="textarea"></textarea>
<p>현재 <span class="string_num">0</span>문자를 입력 중입니다.</p>

JavaScript                                                                                                                                                          main.js

/** 텍스트 영역 */
const textarea = document.querySelector('.textarea);

/** 입력 중인 문자 수 */
const string_num = document.querySelector('.string_num');

// 텍스트를 입력할 때마다 onKeyUp()을 실행
textarea.addEventListener('keyup', onKeyUp);

function onKeyUp() {
	// 입력된 텍스트
    const inputText = textarea.value;
    // 문자 수를 반영
    string)num.innerText = inputText.length;
}

 

---

[Appendix]

Keypress로 변환 문자(특수 기호) 입력 시 주의사항

keypress 이벤트는 문자가 입력될 때만 발생한다.alt, shift, Ctrl, Enter 키 등은 입력해도 작동되지 않는다.따라서 특수 기호 입력 단계에서 Enter 키를 사용해도 이벤트가 작동하지 않는다.이 경우에는 keydown이나 keyup을 사용하는 것이 좋다.

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김