Does anyone know any workarounds for this? I'm trying to use a select element for navigation. It looks something like this;
<select onchange="window.location=(this.options[this.selectedIndex].value)">
It works on all desktop browsers and it also works on my WP7 phone. It doesn't work on my iPhone (iOS 5.0).
iOS tends to not fire change
events when you change the value of their inputs. I've documented this in more depth at the Device-Bugs tracker.
The workaround is to bind to the blur
event instead. In the above example, use onblur
and you'll be all set.
<select onblur="window.location=(this.options[this.selectedIndex].value)">
I just ended up setting the form action to a php page that redirects the page. You don't even need a submit button (although you may as well add one for graceful degradation then hide it with js), the iOS list picker widget automatically triggers the form action when it's 'Done' button is pressed.
I originally wanted to avoid form actions and submit buttons because I felt the js onChange approach was cleaner, but I'm fine with using php on iOS since it doesn't require the submit button.
If you change onchange
to onblur
it works for iOS but not others. The fix I eventually came to was to use BOTH onblur
and onchange
. Seems redundant but has the desired effect.