keyup 이벤트 알아보기

이벤트 객체 - keyup

이 글에서는 keyup event 에 대해 알아보도록 하겠습니다.

keyup event

다음의 예제는 글쓰기 입력창과 같은 곳에서 글자 입력수에 따라서 입력 가능한 글자수를 동적으로 글자 수를 세어주는 예제입니다.

아래의 textarea 에 한글이나 영문을 입력해 보시기 바랍니다.

See the Pen keyup 이벤트 테스트 by jaeheekim (@jaehee) on CodePen.

위의 입력받은 키 이벤트는 keyup 을 사용했습니다. 

위와 같은 것을 구현하고자 할 경우에는 keypress 이벤트는 한글로 사용할 수 없습니다.

왜 keypress 가 아닌 keyup 이벤트를 사용하는 것일까요?

영문을 입력하면 keypress 이벤트가 사용하기 좋지만 한글은 keypress 이벤트를 지원하지 않습니다.

따라서 keypress 이벤트는 배제해야 합니다.

그리고 keydown 이벤트가 아니가 keyup 이벤트를 사용해야 합니다.

이는 키보드 이벤트가 어떠한 순서로 발생하는지를 안다면 이해하기 수월할 것입니다.

키보드 이벤트는 다음과 같은 순서로 진행됩니다.

1. 사용자가 키보드를 누른다.
2. keydown 이벤트가 발생한다.
3. 글자가 입력된다.
4. keypress 이벤트가 발생한다.
5. 사용자가 키보드에서 손을 뗀다.
6. keyup 이벤트가 발생한다.

따라서 keydown 이벤트가 발생한 순간에는 글자가 입력돼 있지 않습니다.

여기서는 입력한 글자 수를 표시해야 하므로 keyup 이벤트를 사용했습니다.

Jaehee's WebClub