<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 대상 textarea 이벤트 keyup
// var inputLength = 글자 길이 val().length();
// var remain = 150 - 글자길이
// h1 태그안에 넣기 html()
$('textarea').keyup(function () {
var inputLength = $(this).val().length;
var remain = 150 - inputLength;
$('h1').html(remain);
// remain 남은글자수가
// 0보다 크거나 같으면 'h1' 글자색을 black
// 0보다 작으면 'h1' 글자색을 red
if (remain >= 0) {
$('h1').css('color','black');
} else {
$('h1').css('color','red');
}
// 150자 입력 초과되면 150자만 남도록
// 문자열.substring() substr()
});
});
</script>
</head>
<body>
<h1>150</h1>
<textarea rows="5" cols="70"></textarea>
</body>
</html>
'IT > jQuery' 카테고리의 다른 글
| jQuery - 애니메이션 show(), hide(), toggle(), innerfade, animate (0) | 2018.11.17 |
|---|---|
| jQuery - form submit 이벤트 함수, event.preventDefault() (0) | 2018.11.17 |
| jQuery - bind 이벤트 연결 (mouseover, click), 메소드 체이닝 (0) | 2018.11.16 |
| jQuery - append(), appendTo(), prepend() (0) | 2018.10.13 |
| jQuery - html(), text() (0) | 2018.10.13 |