JSFiddle - React, Tailwind, and code Playground

by kanonji

HTML

<form>
    <input id="input" type="text" name="input" value="">
</form>

JavaScript

(function($){
    var methods = {
        init: function(callback){
            return this.each(function(){
                var $this = $(this);
                if(void 0 === callback){
                    privates.fire($this);
                } else {
                    privates.register($this, callback);
                    var intervalId;
                    $this.focusin(function(){
                        console.log('focusin');
                        intervalId = privates.watch($this);
                    });
                    $this.focusout(function(){
                        console.log('focusout', intervalId);
                        clearInterval(intervalId);
                    });
                }
            });
        }
    };
    var privates = {
        inputEvent: $.Event('kinput'),
        watch: function($elem, before){
            before = before || $elem.val();
            console.log('watch', before);
            var that = this;
            var intervalId = setInterval(watcher, 50);
            console.log('watch', intervalId );
            return intervalId;
            function watcher(){
                var after = $elem.val();
                console.log('watcher', before, after);
                if(before !== after) {
                    console.log(intervalId);
                    clearInterval(intervalId);
                    privates.fire($elem, before, after);
                    that.watch($elem, after);
                }
            }
        },
        fire: function($elem, before, after){
            console.log('fire', $elem);
            $elem.trigger(this.inputEvent, {
                before: before,
                after: after,
                char: Array.prototype.slice.call(after, after.length-1, after.length).join('')
            });
        },
        register: function($elem, callback){
            console.log('register', $elem, callback);
            $elem.on('kinput', callback);
        }
    };
   ...