[javascript] 글자수 카운팅하기

오늘은 웹페이지 제작 중 글자수 카운팅 하는 기능을 구현해봤다

<ul class="sec-tion">
	<li>
		<label for="comment" class="lab"><strong>댓글</strong></label>
		<textarea name="comment" id="comment" cols="30" rows="10" placeholder="20자 이상 적어주세요"></textarea>
	</li>
</ul>
<span style="color:#aaa;" id="counter">(0 / 100)</span>

우선 html 코드이다

 

<script>
	$('#comment').keyup(function (e){
    var content = $(this).val();
    $('#counter').html("("+content.length+" / 100)");    //글자수 실시간 카운팅

    if (content.length > 100){
        alert("최대 100자까지 입력 가능합니다.");
        $(this).val(content.substring(0, 100));
        $('#counter').html("(100 / 100)");
    }
});


</script>

다음으로 스크립트 코드이다

실시간으로 글자를 카운팅해주고 100자가 넘어가면 알림창을 띄워준다