키보드 이벤트 - keydown, keypress, keyup

 

keydown : 키보드가 눌러질 때

keypress : 글자가 입력 될 때 펑션키, 기능키 사용 못함

keyup : 키보드가 떼어질 때

 

ex.

text type의 input태그 안에 글자를 입력하고 이벤트가 일어나는지 확인해보기

 <input type="text" id="test">
 
    <script>
        $(document).ready(function(){
            $("#test").keydown(function(e){
                console.log("keydown : " + e.key);
            });
            $("#test").keypress(function(e){
                console.log("keypress : " + e.key);
            });
            $("#test").keyup(function(e){
                console.log("keyup : " + e.key);
            });
        });
    </script>

"ttoah" 입력 후 콘솔 창 확인

키보드를 누르고 뗄 때 마다 이벤트가 발생했음을 확인 할 수 있음

 

 

 

이를 이용해 우리가 웹사이트에서 흔히 봤었던 키보드 관련 동적 이벤트를 만들 수 있다

 

 

 

동적으로 글자 수 세기

textarea에 150자까지 입력 받기

 

 

 

 

동적으로 아이디 조건 확인

ex.

(조건)

1. 첫 글자 반드시 영문 소문자

2. 영문 소문자와 숫자로만 이루어짐

3. 총 4~12자

 

결과창으로 확인해보면 조건에 불만족할 시, 조건에 만족할 시 span태그에 스타일 적용된 문구가 출력됨

 

아이디 조건은 정규표현식으로 검사

/^[a-z][a-z\d]{3,11}$/

^[a-z] -> 알파벳 소문자로 시작하는지

[a-z\d] -> 알파벳 소문자와 숫자로 이루어졌는지

{3,11} -> 4~12자 사이인지

/^$/ -> 로 감싸 주어야 전체를 검사함