[jQuery-Event]keydown(),keypress(),keyup() - 키보드 이벤트

1.keydown(), keypress(), keyup() - 키보드 이벤트

 

keydown() - 키보드가 눌러질 때 발생

keypress() - 글자가 입력될 때 발생

keyup() - 키보드가 떼어질 때 발생

 

[기본 예제 - 1] 글자 수 체크

$('textarea').keyup(function () {

var inputLength = $(this).val().length;

var remain = 150 - inputLength;

 

$('h1').html(remain);

 

if ( remain >= 0) {

$('h1').css('color','blue');

} else {

$('h1').css('color','red');

}

});

 

<div>

남은 글자수

<h1>150</h1>

<textarea></textarea>

</div>

 

[기본 예제 결과 - 1]

남은 글자수

 

 

※ keyup() 이벤트를 사용하는 이유

    : 영어는 keypress() 이벤트가 사용하기 좋지만 한글은 지원하지 않는다

 

 

[기본 예제 - 2] 누른 키 확인

$(function () {

$('body').keypress(function (event) {

alert(String.fromCharCode(event.keycode));

});

});

 

 

[기본 예제 결과 - 2]

누른키가 경고창으로 표시된다

 

※ String.fromCharCode() - 숫자코드를 문자로 변경해주는 메소드 이다

※ keycode? - 이벤트 객체의 속성으로써 눌려진 키의 숫자값을 가지고 있다

[출처] [jQuery-Event]keydown(),keypress(),keyup() - 키보드 이벤트|작성자 QuirksMode