• J볃교

JQUERY를 이용한 TEXTAREA 글자 수 제한

2018-11-26 175

설명

  • 카카오톡 링크

JQUERY를 이용하여 TEXTAREA의 글자수를 정할 수 있습니다. :D

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	.write_textarea {display:inline-block; width:100%; height:200px; font-size:16px;  }
</style>
<textarea name="" id="" title="" class="write_textarea" data-length="100"></textarea>
<p class="right_p">입력한 글자 수 <em class="now_length">0</em> / <em class="total_length">0</em> 입니다.</p>
<script type="text/javascript">
	var write_length = $(".write_textarea").attr("data-length");
	$(".total_length").text(write_length);
	$(".write_textarea").on("change keyup", function() {
		var now_length = $(".write_textarea").val().length;
		
		if($(this).val().length > write_length) {
			alert('최대 '+write_length+'자까지 입력하실 수 있습니다.');
			$(this).val($(this).val().substring(0, write_length));
			$(".now_length").text(write_length);
		} else {
			$(".now_length").text(now_length);
		}
	});
</script>