Character Count

by Alvin Olavarrieta

HTML

<div>
  <input type="text" placeholder="Title" maxlength="10">
  <div class="number-preview"></div>
</div>


<br />

<div>
  <input type="text" placeholder="Title" maxlength="16">
  <div class="number-preview"></div>
</div>

<br />

<div>
  <input type="text" placeholder="Title" maxlength="14">
  <div class="number-preview"></div>
</div>

JavaScript

$('input[type="text"], textarea').each(function() {
  var $this = $(this);
  $this.next('.number-preview').text($this.prop('maxLength'));
}).on('keyup', function() {
  //make sure your input has "maxLength" property
  var $this = $(this);
  var maxLen = $this.prop('maxLength');
  var textLen = maxLen - $this.val().length;
  ($this.val().length >= maxLen) ? $this.next('.number-preview').text('0'): $this.next('.number-preview').text(textLen);
});