onInput event detection support

[thatmarvin]

It'll be nice if Modernizr can detect support for the input event [1]. At the moment, at least Gecko and WebKit supports it.

[1] http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#common-event-behaviors

[ryanseddon]

Unfortunately the oninput event cannot be properly detected in Mozilla due to this bug.

[paulirish]

I added it to https://github.com/Modernizr/Modernizr/wiki/Undetectables

thx :)

[ryanseddon]

Looks like FF4 has fixed the bug as oninput/oninvalid return correct results now.

[paulirish]

Forreal? And its in FF4 final?

[ryanseddon]

Yep, I only noticed the other day when I was playing around with some form stuff and FF4 started returning true for the events it previously failed on. http://jsfiddle.net/ryanseddon/cJwgq/

[AndyE]

You can detect support in older versions of Firefox too, albeit with a lot of dicking around thanks to the bug. I wrote a jQuery plugin to normalize the event and that uses a variation of a technique outlined by Daniel Friesen at http://blog.danielfriesen.name/2010/02/16/html5-browser-maze-oninput-support/. His method creates a fake key press on a temp/hidden element in Firefox, which fires the input event handler.

Feel free to use/mutilate the test case I wrote;

var inputSupport = "oninput" in document.body || checkEvent(document.body);
/*
   The following function tests an element for oninput support in Firefox.  Many thanks to
        http://blog.danielfriesen.name/2010/02/16/html5-browser-maze-oninput-support/
*/
function checkEvent(el) {
    // First check, for if Firefox fixes its issue with el.oninput = function
    el.setAttribute("oninput", "return");
    if (typeof el.oninput == "function")
        return true;

    // Second check, because Firefox doesn't map oninput attribute to oninput property
    try {
        var e  = document.createEvent("KeyboardEvent"),
            ok = false,
            tester = function(e) {
                ok = true;
                e.preventDefault();
                e.stopPropagation();
            }
        e.initKeyEvent("keypress", true, true, window, false, false, false, false, 0, "e".charCodeAt(0));
        document.body.appendChild(el);
        el.addEventListener("input", tester, false);
        el.focus();
        el.dispatchEvent(e);
        el.removeEventListener("input", tester, false);
        document.body.removeChild(el);
        return ok;
    } catch(e) {}
}

Only Firefox versions affected by the bug, IE8 and lower and very old browsers that don't support oninput will run the function. You could avoid the check in IE 8 and lower by checking for onpropertychange before running the function - that's the event my plugin uses to make the event work in those browsers.

[paulirish]

for now Modernizr is going to keep this one out of scope.

We recommend Daniel's incredible research as well as Andy's jquery plugin.

[stavarengo]

Any plans to implement this in the near future?

[stucox]

I'd be keen to include it if someone could submit a PR based on @AndyE's test case above?

[aTei]

Vote for feature. Situation: we use contenteditable and use input and cut copy paste, so for IE and Opera it cause event only once, and for chrome and firefox - 2 event cut and than `input.

[johan]

These days, there's about three levels of input events support: I guess the initial oninput this probably is about (input events that don't have an inputType property) that Firefox supports might be called InputEvents 0, and then there's the latter type specified by the W3C specs InputEvents Level 1 and InputEvents Level 2 (that also add the beforeinput event, which I don't know of any intuitive more direct way to detect) that I'd suggest this hack to detect:

const input_events_level1_or_better = 'inputType' in (new InputEvent('input'));