JSFiddle - React, Tailwind, and code Playground

by snavarro81

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<textarea data-bind="textInput: message.view"></textarea>
<p>Characters left : <span data-bind="text: charLeft"></span></p>
<pre data-bind="text: message"></pre>

JavaScript

ko.extenders.maxlength = function (target, maxlength) {
    var view = ko.dependentObservable({
        read: target,
        write: function (value) {
            if (value.length <= maxlength) {
                target(value);
            } else {
                view.notifySubscribers(target());
            }
        }
    });
    target.view = view;
    target.maxlength = maxlength;
    return target;
};

function ViewModel() {
    this.message = ko.observable('').extend({ maxlength: 10 });
    this.charLeft = ko.pureComputed(function(){
        return this.message.maxlength - this.message().length;
    }, this);
}

ko.applyBindings(new ViewModel());