onInput event detection support #210

thatmarvin opened this Issue Mar 3, 2011 · 10 comments


None yet
7 participants

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 commented Mar 5, 2011

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

@paulirish paulirish closed this May 22, 2011


ryanseddon commented May 22, 2011

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


paulirish commented May 22, 2011

Forreal? And its in FF4 final?

@paulirish paulirish reopened this May 23, 2011


ryanseddon commented May 23, 2011

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 commented Jun 8, 2011

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
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.initKeyEvent("keypress", true, true, window, false, false, false, false, 0, "e".charCodeAt(0));
        el.addEventListener("input", tester, false);
        el.removeEventListener("input", tester, false);
        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 commented May 11, 2012

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.

@paulirish paulirish closed this May 11, 2012

Any plans to implement this in the near future?


stucox commented Aug 11, 2013

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

aTei commented Oct 8, 2013

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment