[javascript] 키보드 이벤트 (onkeydown, onkeyup, onkeypress)
onkeydown, onkeyup, onkeypress 이벤트는 키보드 입력시 동작 시점에 따라 발생하는 키보드 이벤트 이다.
onkeydown : 키를 눌렀을때 이벤트이다 (shift, alt, controll, capslock 등의 모든 키에 동작한다. 단 한영변환, 한자 등의 특수키는 인식 못한다).
onkeyup : 키를 눌렀다가 땠을 때 이벤트이다 (onkeydown 에서 인식하는 키들을 인식 한다).
onkeypress : 실제로 글자가 써질때 이벤트이다 (shift, tap, enter 등의 특수키는 인식 못한다).
아래 예제는 jQuery 라이브러리를 사용해서 구현해 보겠다.
기본 html 소스
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
남은 글자수
<h1>150</h1>
<textarea></textarea>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$('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');
}
});
</script>
</body>
</html>
실행 결과는 아래와 같다.
onkeypress 이벤트는 한글을 지원하지 않는다.
'develop > javascript' 카테고리의 다른 글
| [javascript] replace 를 replaceAll 처럼 사용하는 방법 (0) | 2017.10.25 |
|---|---|
| [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법 (0) | 2017.09.28 |
| [jQuery] .attr() 과 .prop() 의 차이 (0) | 2017.09.28 |
| [javascript] IndexOf() 문자열에 특정 문자 포함 여부 확인 (0) | 2017.09.22 |
| [javascript] toFixed() 자바스크립트 소수점 계산시 오류 해결 방법 (0) | 2017.09.21 |