New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onInput event detection support #210

Closed
thatmarvin opened this Issue Mar 3, 2011 · 11 comments

Comments

Projects
None yet
8 participants
@thatmarvin

thatmarvin commented Mar 3, 2011

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

This comment has been minimized.

Show comment
Hide comment
@ryanseddon

ryanseddon Mar 5, 2011

Member

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

Member

ryanseddon commented Mar 5, 2011

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

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish
Member

paulirish commented May 22, 2011

@paulirish paulirish closed this May 22, 2011

@ryanseddon

This comment has been minimized.

Show comment
Hide comment
@ryanseddon

ryanseddon May 22, 2011

Member

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

Member

ryanseddon commented May 22, 2011

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

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish May 22, 2011

Member

Forreal? And its in FF4 final?

Member

paulirish commented May 22, 2011

Forreal? And its in FF4 final?

@paulirish paulirish reopened this May 23, 2011

@ryanseddon

This comment has been minimized.

Show comment
Hide comment
@ryanseddon

ryanseddon May 23, 2011

Member

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/

Member

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

This comment has been minimized.

Show comment
Hide comment
@AndyE

AndyE 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
        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.

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish May 11, 2012

Member

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.

Member

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

@stavarengo

This comment has been minimized.

Show comment
Hide comment
@stavarengo

stavarengo Aug 9, 2013

Any plans to implement this in the near future?

stavarengo commented Aug 9, 2013

Any plans to implement this in the near future?

@stucox

This comment has been minimized.

Show comment
Hide comment
@stucox

stucox Aug 11, 2013

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@aTei

aTei 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.

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.

@johan

This comment has been minimized.

Show comment
Hide comment
@johan

johan Apr 19, 2018

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'));

johan commented Apr 19, 2018

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'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment