I want to trigger an event every single time data changes in an HTML text input field regardless of focus

By : MikeN
Source: Stackoverflow.com
Question!

How do you catch the client-side event when a browser changes an input text field using the browser's autocomplete feature for a plain HTML input field? (This is the small dropdown on input fields that is supplied by the browser, I know that you can disable it with "autocomplete=off" in some browsers per input field.)

I'm already binding to the "change/keyup" event, but these don't handle the case when the user starts typing in a value and uses the Browser's native autocomplete to fill in the rest of the field (and staying in the focus of the field.)

By : MikeN


Answers

you can call your function in your function for next time after many seconds , try this :

function startTime() {
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML = h+":"+m+":"+s;
    var t = setTimeout(function(){startTime()},500);
}

function checkTime(i) {
    if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
<!DOCTYPE html>
<html>
<head></head>
<body onload="startTime()">

<div id="txt"></div>

</body>
</html>

reference is : http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock

By : easa


I'm surprised that the 'change' event doesn't fire to be honest...

Anyway, Plutor has the right idea. A more CPU friendly version of his answer:

var value,
    elem = $('input[name=email]')[0];
setInterval(function(){
    if (elem.value !== value) { /* do something */ }
    value = elem.value;
}, 100);
By : James


The only foolproof way I know of to always catch ALL changes no matter how they're done is to use a setInterval. This is somewhat CPU intensive, though, so you probably want to try to keep the selector more minimal than this.

setInterval( function() {
    $('input').each( function() {
        if ($(this).val() != $(this).attr("_value")) {
            // Save the new value
            $(this).attr("_value", $(this).val());

            // TODO - Handle the changed value
        }
    });
}, 100);
By : Plutor


This video can help you solving your question :)
By: admin