[jQuery] 글자수 체크 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

<textarea name="textarea" style="width:200px; height:27px;" id="contentHelp"></textarea>
<div class="remaining" style="font-size:11px; line-height:14px;">남은 글자수: <span class="count">40</span></div>

<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>


관련자료
http://jsfiddle.net/gchoice/n7Mur/
http://codeflow.co.kr/question/595/textarea-의-입력-글자수를-제한하고-싶습니다/