Textarea 에 최대 글자 수 남은 글자 수 출력

 

1. 사용법

$(document).ready(function() {
    $('.textarea-count').each(function() {
        var $textarea = $(this);
        var $counter = $textarea.next('.character-counter');
        var maxLength = $textarea.attr('maxlength');
        
        // 초기 카운터 텍스트 설정
        $counter.text('0/' + maxLength);
        
        $textarea.on('input', function() {
            var text = $textarea.val();
            var currentLength = text.length;
            
            $counter.text(currentLength + '/' + maxLength);
            
            if(currentLength > maxLength) {
                $textarea.val(text.substring(0, maxLength));
                $counter.text(maxLength + '/' + maxLength);
            }
        });
    });
});

<textarea class="textarea-count" maxlength="1000"></textarea>
<div class="character-counter"></div>

<textarea class="textarea-count" maxlength="500"></textarea>
<div class="character-counter"></div>

 

2. 결과