JSFiddle - React, Tailwind, and code Playground

by David DeLella

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="form-group material-design">
  <textarea class="form-control" cols="20" id="Comments" maxlength="255" placeholder=" " rows="3"></textarea>
  <label for="Comments">Comments</label>
  <small class="form-text text-muted" id="CommentsCounter"></small>
  <script type="text/javascript">
    $(document).ready(function() {
      var maxLength = 255;
      var charactersRemaining = 255;
      $('#CommentsCounter').html('{0} / {1} characters remaining'.format(charactersRemaining, maxLength));
      $('#Comments').keyup(function() {
        var currentLength = $('#Comments').val().length;
        charactersRemaining = maxLength - currentLength;
        $('#CommentsCounter').html('{0} / {1} characters remaining'.format(charactersRemaining, maxLength));
      });
    });

  </script>
</div>

JavaScript

String.prototype.format = function () {
  var args = arguments;
  return this.replace(/\{\{|\}\}|\{(\d+)\}/g, function (m, n) {
    if (m == "{{") { return "{"; }
    if (m == "}}") { return "}"; }
    return args[n];
  });
};