본문 바로가기
Jquery

Jquery textarea 글자수 체크

by 개발하는 늑대 2020. 8. 17.
728x90

아래 예제는 200자 가 넘어 가면 경고를 하는 Jquery 입니다.



/**
 * 목적 : 참고사항 글자수 체크
 * 매개변수 : 없음
 * 반환값 : 없음  
 */

$('#Cont').each(function(){
	var $count = $('#count', this);
	var $input = $("#refCn");
	var maximumCount = $count.text() * 1;
	
	var update = function(){
		var before = $count.text() * 1;
		var now = maximumCount - $input.val().length;
		
		// 사용자가 입력한 값이 제한 값을 초과하는지를 검사한다.
		if (now < 0) {
			var str = $input.val();
			$("#refCn").focus();
			
			var inputVal = str.substr(0, maximumCount);
			alert('200자를 초과하였습니다.');

			now = 0;

			$input.val(inputVal);
		}

		// 필요한 경우 DOM을 수정한다.

		if (before != now) {
			$count.text(now);
		}

	};


	 $input.bind('input keyup paste', function(){
		setTimeout(update, 0);
	 });

	 update();
});

 
<div align="right" id="Cont">
 <font color="#3366CC">
 (*<span id="count">200</span>자 이내로 작성합니다.)   
 </font>
 </div>
 
 <textarea id="refCn" name="refCn" cols="125" rows="8" class="textarea"></textarea>
728x90