In my previous blog post, I wished that the
oninput event, which has a similar function as
onforminput the main argument behind dropping
onforminput event. Makes sense, and I was happy — it works in all modern web browsers, including IE. But as you would guess, there has to be at least one problem with a cool bit of new web technology when it comes to cross-browser implementation.
What are the issues?
IE has three issues related to
oninputis not supported at all in IE8 and lower.
- IE9 does not allow referring to form fields directly in the
oninputexpression. For example, this code works in all browsers except IE9:
<form name="f1" oninput="output.value = parseFloat(darkness.value);"> Darkness Level: <input type="range" name="darkness" value="0" min="0" max="255"> <output name="output"> </form>
This is not so bad, since one could refactor the event code like this:
<form name="f1" oninput="document.getElementById('output').innerHTML = parseFloat(darkness.value);"> Darkness Level: <input type="range" name="darkness" value="0" min="0" max="255"> <output id="output"> </form>
- If you use the backspace key while entering in a value, IE9 doesn’t fire the
oninputevent. This, in my opinion, is really bad, because it does affect how the form behaves. For example, take the following form in IE9:
As the user types in values for the amount and price into the form, the
oninputevent calculates the tax and total. However, if the user is entering a value into, say, the price and make a mistake and press the backspace, IE9 will not update the tax and total. Your application will give erroneous information, the user will be surprised at the total being larger than he expected, says “screw this” and leaves the application. Your company loses the big sale, your boss fires you, and next thing you know you are on a street, or worse, coding COBOL on a 30 year old IBM PC running MS-DOS 1.0 in some fishing tackle store. Not pretty.
Oh The Humanity! How Can I Prevent Such a Fate?
Since I hate COBOL, I decided to update my html5Widgets library to:
- Add support for
oninputfor browsers that don’t support it (e.g. IE7 and 8)
- Force IE9 to fire a form’s
oninputwhen the backspace and delete keys are pressed inside any of the
- Force IE9 to fire a form’s
cutevent is fired on any of the
Using the link below, you can see an example similar to the one above using html5Widgets to fix these issues.
In order to do this, I used ideas from Daniel Friesen’s blog post, A HTML5 Browser Maze, Oninput Support (thanks to Paul Irish for pointing me into that direction). The result works rather well. Note that I did not fix the IE9 “cannot use
.value, must use
.innerHTML” bug described earlier. It’s a little bit more verbose, but for now it’s what a developer needs to do for true cross-browser
oninput support. I have also kept
onforminput support in the code, just in case anyone has used it in the past (e.g. me). To ensure the best experience, I wouldn’t use both events on the same page.
Note also I did not add support for
oninput in any element other than
form. I may do this after further research in the way it supported across browsers (for example, Firefox has an issue with
oninput being used on