keyup메소드는 키보드의 키가 눌리고 올라갈 때 불려지는 메소드입니다.
이 메소드를 이용해서 다음과 같이 간단한 글자수 세기 프로그램을 만들어봅시다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function (event){
$('textarea').keyup(function(){
//남은 글자 수를 구합니다.
var inputLength = $(this).val().length;
var remain = 150 - inputLength;
//문서 객체에 입력합니다.
$('h1').html(remain);
//문서 객체의 색상을 변경하빈다.
if(remain >= 0){
$('h1').css('color', 'black');
}else{
$('h1').css('color', 'red');
}
});
});
</script>
</head>
<body>
<div>
<p>지금 내 생각을</p>
<h1>150</h1>
<textarea cols="70" rows="5"></textarea>
</div>
</body>
</html>
출력화면
'프로그래밍 > Jquery' 카테고리의 다른 글
| jquery - innerfade 플러그인을 이용한 사진 변경 효과 적용하기 (0) | 2014.10.27 |
|---|---|
| jquery - toggle 메소드를 이용한 시각효과 만들기 (0) | 2014.10.20 |
| jquery - 입력양식 이벤트를 이용한 한번에 모든 체크박스를 체크하기 (2) | 2014.10.18 |
| jquery - window객체를 활용하며 무한 스크롤 구현하기 (0) | 2014.10.18 |
| jquery - delegate 방법을 사용한 이벤트 연결 범위 한정 (0) | 2014.10.11 |
| jquery - 기본 이벤트를 제거하고 이벤트 전달 막는 법 2가지 (0) | 2014.10.11 |
| jquery - context 객체 활용 예제 (0) | 2014.10.11 |
| jquery - on메소드를 이용한 이벤트 연결 (0) | 2014.10.11 |