Joys of Cross-Browser Development
Joys of Cross-Browser Development
Join the DZone community and get the full member experience.
Join For FreeLearn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.
In FF, change is fired when:
- You hit enter after tabbing into the select and changing its value
- You tab out of the field after changing its value with the up and down arrows
- You mouse click on the select, then click on an entry in the pop up list
This is sensible, even if it does not, perhaps, match the spec.
In IE 6:
- After using the mouse to select a value from the popup
- After changing the value with the up and down arrows
In other words, any visual change to the select causes an immediate change event. Of course, I need to work around IE's behavior since it will result in way too many Ajax requests. My event handler needs to set a timer and wait some time, perhaps 1/4 seconds, before doing the Ajax update (but only if another change event hasn't been triggered). Fortunately, I have Prototype's delay on my side.
Meanwhile, who implements the spec correctly? Here's what it says:
The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA
So, when using mouse selection, FF fires early (before the tab out of the field, or when you hit enter), and IE fires early all the time.
And for those who have asked ... yes, I'll "productize" this code and put it into Tapestry 5.2!
What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.
Like This Article? Read More From DZone
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}