The problem
I was recently working through some Internet Explorer issues with a web application I’ve been involved in developing, when I came across a strange little bug related to the “change” event. I found that I had to click a radio button twice, or click a radio button and then click elsewhere on the page in order for the event to be triggered. This obviously pointed towards the event triggering to be buggy in Internet Explorer.
IE fires the event when the checkbox or radio is blurred, and not when it is activated. This is a serious bug that requires the user to take another action and prevents a consistent cross-browser interface based on the change event on checkboxes and radios.
The solution?
I see there being 3 possible solutions:
- Use the “click” event rather than the “change” event.
- Use browser specific targeted script in the JavaScript functions where the “change” event is required.
- Use conditional comments to include IE specific JavaScript, and trigger blurring and then focusing the field.
The best solution right now seems to be to use the “click” event rather than “change” in these scenarios. This is certainly not an elegant solution and does indeed “break” the keyboard functionality since it is possible to change the value of an input field with the keyboard and hence not trigger a “change” event. I’d say the 3rd solution comes a close runner up, and the 2nd solution definitely being suboptimal, for the reason that it is difficult to consistently detect the browser using JavaScript.
I found it interesting, so I thought I’d share and maybe it will help someone! I’d love to hear your opinions on what you think the optimal solution is.
If you find my posts useful, you should check out my OnePage and follow me on Twitter.