YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > Javascript
검색
멤버이름    오토
비밀번호 
 

[JQUERY]글자수 체크

페이지 정보

작성자 MintState 댓글 0건 조회 302회 작성일 18-07-24 15:57

본문

남은 글자수
http://jsfiddle.net/gchoice/n7Mur/

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquery 글자수 체크</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
	$('.remaining').each(function() {
		// count 정보 및 count 정보와 관련된 textarea/input 요소를 찾아내서 변수에 저장한다.
		var $count = $('.count', this);
		var $input = $(this).prev();
		// .text()가 문자열을 반환하기에 이 문자를 숫자로 만들기 위해 1을 곱한다.
		var maximumCount = $count.text() * 1;
		// update 함수는 keyup, paste, input 이벤트에서 호출한다.
		var update = function() {
			var before = $count.text() * 1;
			var now = maximumCount - $input.val().length;
			// 사용자가 입력한 값이 제한 값을 초과하는지를 검사한다.
			if (now < 0) {
				var str = $input.val();
				alert('글자 입력수가 초과하였습니다.');
				$input.val(str.substr(0, maximumCount));
				now = 0;
			}
			// 필요한 경우 DOM을 수정한다.
			if (before != now) {
				$count.text(now);
			}
		};
		// input, keyup, paste 이벤트와 update 함수를 바인드한다
		$input.bind('input keyup paste', function() {
			setTimeout(update, 0)
		});
		update();
	});
});
</script>
</head>
<body>
<textarea id="contentHelp"></textarea>
<div class=remaining>남은 글자수: <span class="count">100</span></div>
</body>
</html>


쓴 글자수
<textarea name="memo" id="memo"></textarea>
<script language="javascript">
$(document).ready(function(){
	var update = function() {
		var now = $('#memo').val().length;
		$('.count').text(now);
	};
	// input, keyup, paste 이벤트와 update 함수를 바인드한다
	$('#memo').bind('input keyup paste', function() {
		setTimeout(update, 0)
	});
	update();
});
</script>

댓글목록

등록된 댓글이 없습니다.

Total 177건 1 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
열람중 MintState 303 07-24
176 MintState 511 04-19
175 MintState 1326 11-02
174 MintState 1235 10-27
173 MintState 1311 09-26
172 MintState 1976 03-08
171 MintState 2401 11-14
170 MintState 2350 07-01
169 MintState 3348 03-05
168 MintState 4302 11-19
167 MintState 9627 04-11
166 MintState 8412 04-06
165 MintState 8533 07-23
164 MintState 8481 06-09
163 MintState 10248 04-29
162 MintState 11550 04-29
161 MintState 8900 04-16
160 MintState 14819 02-17
159 MintState 15113 01-19
158 MintState 11224 10-27
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2018, YesYo.com MintState. ™