Question

Is anyone able to explain this?

Basically when you’re in firefox, and you hit tab, the “console.log” in the onchange gets called but not in Chrome/Safari (webkit) or IE.

function initLookup(id) {
    var lookupElement = document.getElementById(id);
    var lookup = new Lookup(lookupElement);            
    lookupElement.lookup = lookup;
}

function Lookup(lookupElement) {
    this.doKeyDown = doKeyDown;
    this.setLookup = setLookup;        
    this.inputElement = lookupElement;
    this.inputElement.onkeydown = this.doKeyDown;
    var self = this;

    function setLookup() {
        self.inputElement.value = 'asdf';
    }
    function doKeyDown(event) {
        if(event.keyCode == 9) {
            setLookup();
        }            
    }
}
initLookup("one");

And a JS fiddle working example:​

http://jsfiddle.net/pj9Gf/5/

Answer 1

Gecko differs from IE (and apparently Webkit), in that the change event is fired after the blur event had been fired.

By setting the value on TAB key-press, you’re effectively preventing the change from being applied, as the change trigger is defined by a difference between the values detected on focus and on blur.

Reference

• element.onchange on Mozilla Developer Network