JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<div class="container">
  <div><span>Remaining characters:<span class="counter"></span></div>
  <textarea id="content" cols=40 rows=5 type="text" data-max-chars=25 placeholder="Comment..." maxlength=10></textarea>
</div>

<textarea cols=40 rows=10></textarea>

CSS

.error {
    color: red;
}

#content {
    width: 300px;
    height: 300px;
}

body {
    display: flex;
}

JavaScript

(function() {
  var component = {
    init: function() {
      var container = $(".container");
      var counter = container.find(".counter");
      var textarea = container.find("textarea");
      var maxlength = textarea.attr("maxlength") || 500;
      counter.text(maxlength);
      textarea.on("input propertychange", function(event) {
        var value = event.currentTarget.value;
        if (value.length > (maxlength * 0.10)) {
          console.log("oh no");
        }
        console.log(event.currentTarget.value.slice(0, maxlength));
        counter.text(maxlength - event.currentTarget.value.length);
      });
    }
  };
  component.init();
})();