JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<div id="ec">
    <div id="wrapper">
        <input id="date" type="date" value="2014-12-18" />
    </div>
</div>
<div id="log"></div>

CSS

input {
    width: 100%;
    margin: 0px;
    box-sizing: border-box;
}

JavaScript

var i = 1;
$('#ec').on('change', 'input', function () {
    $('#log').prepend('<div>A change occured! (#' + i + ')</div>');
    i += 1;
});

$('#wrapper').on('change', 'input', function (event) {
    if (!event.isTrigger) {
        event.preventDefault();
        event.stopPropagation();
    }
});
$('#wrapper').on('focus', 'input', function (event) {
    var $input = $(event.target);
    $input.data('old_value', $input.val());
});
$('#wrapper').on('keydown', 'input', function (event) {
    var $input = $(event.target);
    
    if (event.keyCode === 13 && $input.val() !== $input.data('old_value')) {                        
        $input.data('old_value', $input.val());
        $input.trigger('change');
    }
});
$('#wrapper').on('focusout', 'input', function (event) {
    var $input = $(event.target);
    
    if ($input.val() !== $input.data('old_value')) {                        
        $input.data('old_value', $input.val());
        $input.trigger('change');
    }
});