JSFiddle - React, Tailwind, and code Playground

by ashfame

HTML

<form>
    <label>Name
        <input type="text" name="name" id="name" />
    </label>
    <label>Email
        <input type="text" name="email" id="email" />
    </label>
    <label>Address 1
        <input type="text" name="address1" id="address1" />
    </label>
    <label>Address 2
        <input type="text" name="address2" id="address2" />
    </label>
</form>

CSS

form {
    width: 100px;
}

JavaScript

(function ($) {
    $(document).ready(function () {
        $('input').focus(function (e) {
            $(this).data('prevValue', $(this).val());
            console.log('focus at', e.target.name, e.timeStamp);
        });
        $('input').blur(function (e) {
            //$(this).data('prevValue', $(this).val());
            console.log('blur', e.target.name, e.timeStamp);
        });
        $('input').change(function (e) {
            var prevValue = $(this).data('prevValue');
            var newValue = $(this).val();
            console.log('changed', e.target.name, e.timeStamp, prevValue, '-->', newValue);
        });
        window.console.clear();
    });
})(jQuery);