JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<textarea data-bind="value: comment, valueUpdate: 'afterkeydown', limitCharacters: 20"></textarea>

<br/><br/>
<span data-bind="text: count"></span> characters

JavaScript

ko.bindingHandlers.limitCharacters = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel)
    {
       element.value = element.value.substr(0, valueAccessor());
       allBindingsAccessor().value(element.value.substr(0, valueAccessor()));
    }
};

var viewModel = function(){
    var self = this;
    
    self.comment = ko.observable("");
    self.count = ko.computed(function(){
        var countNum = 20 - self.comment().length;
        return countNum;
    });
}

ko.applyBindings(viewModel());