Text Counter with JQuery

by Matthew Schenker

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="counter-textarea" name="textname1" rows="5" cols="20" maxlength="25"></textarea>
<pre>You have <span class="remaining">25</span> characters left</pre>

CSS

.remaining {
  color: red;
}

JavaScript

$(document).ready(function() {
  var totalchar = 25;
  $('#counter-textarea').keydown(function() {
    var leftchars = totalchar - $(this).val().length;
    $('.remaining').text(leftchars);
  });
});