oninput alternative monitors the field on focus

The new Date is to demonstrate the interval is cleared when leaving the field

by Michel Plungjan

HTML

<input type="search" id="search" required="required" placeholder="search..."><span id="status"></span>

JavaScript

// Note this is an "oninput" alternative

function tell(fld,id) {
    $("#"+id).html((fld.val()==""?"Clear":"Not clear")+" - "+new Date())
}
$(function() {
    $("#search").on("focus",function() {
        var srch = $(this);
        var tId = setInterval(function() { tell(srch,"status") },100);
        $(this).data("tId",tId);
    })
    .on("blur",function() {
        clearInterval($(this).data("tId"));
     });
    tell($("#search"),"status");

    // other events
    $("#search").on("input",function() {
        window.console && console.log("oninput triggered");
    })
    .on("search",function() {
        window.console && console.log("onsearch triggered");
    });    
});


















/* by: thinkingstiff.com license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28096782-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
    
var headerUri = 'http://stackoverflow.com/a/16191510/295783',
    headerCaption = '<div style="padding-top:5px">What event is triggered when the user cancels input via the webkit cancel button?</div>';
document.body.insertAdjacentHTML(
    'afterBegin',
      '<a href="' + headerUri + '" '
    + 'target="_top" '
    + 'onmouseover="this.style.opacity=\'.95\'" '
    + 'onmouseout="this.style.opacity=\'1\'" '
    + 'style="'
        + 'background-color: grey;'
        + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3),...