[jQuery] textarea 글자수 카운터

HTML

 

<div 클래스=덮개>
    <textarea 아이디=내용 maxlength="300"></textarea>
    <한뼘 아이디=카운터>###</한뼘>
</div>

 

 

CSS

 

.wrap {
    width: 500px;
    height: auto;
    position: relative;
    display: inline-block;
}
.wrap textarea {
    width: 100%;
    resize: none;
    min-height: 4.5em;
    line-height:1.6em;
    max-height: 9em;
}
.wrap span {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
#counter {
  background:rgba(255,0,0,0.5);
  border-radius: 0.5em;
  padding: 0 .5em 0 .5em;
  font-size: 0.75em;
}

 

 

JavaScript

 

$(function() {
      $('#content').keyup(function (e){
          var content = $(this).val();
          $(this).height(((content.split('\n').length + 1) * 1.5) + 'em');
          $('#counter').html(content.length + '/300');
      });
      $('#content').keyup();
});

 

 

Result

 

 

[출처] http://zinee-world.tistory.com/237