JSFiddle - React, Tailwind, and code Playground

by gromer

HTML

<div>
    <!-- Combining the above methods -->
    <label for="combined">Combined</label>
    <input id="combined" />
    <span></span>
</div>

<div id="console"></div>

CSS

body {padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;}
div {margin:15px;}
label {display:block;}
input {border:solid 1px #888;font-size:20px;border-radius:5px;padding:2px;outline:none;}
#combined { box-shadow: 0 0 4px orange; }

#console { margin-top: 20px; }

JavaScript

if (typeof console === "undefined") {
    console = {
        log: function (message) {
            $('#console').append(message + '<br />');
        } 
   };
}

$(document).on('input keyup paste', '#combined', function(e) {
  //console.log(e.type);
  e.stopImmediatePropagation();
    checkCombinedInputChange();
});

$(document).on('focus', '#combined', function() {
  startCombinedTimer();
});

$(document).on('blur', '#combined', function() {
  endCombinedTimer();
});

var lastCombinedValue = '',
    $combined = $('#combined'),
    checkCombinedInputChange = function() {
      if (lastCombinedValue !== $combined.val()) {
        $combined.next().stop(true, true).fadeIn(0).html('Changed to ' + $combined.val());
        lastCombinedValue = $combined.val();
      }
    },
    combinedTimer = undefined,
    startCombinedTimer = function() {
      combinedTimer = setInterval(checkCombinedInputChange, 200);
    },
    endCombinedTimer = function() {
      clearInterval(combinedTimer);
    };