Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

onInput event detection support #210

Closed
thatmarvin opened this Issue · 10 comments

7 participants

@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
Owner

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

@paulirish paulirish closed this
@ryanseddon
Owner

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

@paulirish
Owner

Forreal? And its in FF4 final?

@paulirish paulirish reopened this
@ryanseddon
Owner

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
Owner

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
@stavarengo

Any plans to implement this in the near future?

@stucox
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.