iOS 7 onchange event is broken in iPad 3+Mini // N

问题:

Please test this only on iPad running ios 7

It appears that iOS 7 doesn't support alert() and confirm() for onchange events on iPad. Strange thing is that it works on iPhone 4s running ios 7.0 and in desktop browser but not on ipad 3 or ipad mini running ios 7.0. It fires the dialog and when clicked it darkens the button (as if it was clicked) and then the browser freezes. Happens in both Safari and chrome running on iOS 7 iPad and iPad mini.

Any pointers would be greatly appreciated. Already tried onblur and onkeypress with no success :-/

Options
<select id="iCard" onchange="alert('It worked.')">
    <option value="0" selected="selected">(none)</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Issue can be seen here (make sure to test it on iPad running iOS 7): http://jsfiddle.net/sethsanders/MvSxm/

回答1:

Workaround here http://jsfiddle.net/sethsanders/ZzkBd/

It is very IE7 to need a setTimeout to handle a stuck event handler

function SetCard(sel) {
   setTimeout(function() { alert('SetCard called successfully.');},10);
   document.getElementById("msg").innerHTML=sel.value + ":" + sel.options[sel.selectedIndex].text;
}

回答2:

Apparently it's an iOS7 bug on the iPad only.

The HTML's select on iPad looks as the popup (iOS developers use the popover notion) on selecting.

I'm sure the point is in the conflict of two modal controls – select's popup and the confirm/alert. I.E. the confirm/alert appears at the time when select's popup is still visible and this locks up the confirm/alert.

Exactly that happened in your case for onchange event.

The setTimeout helps in that case:

<select id="iCard" onchange="setTimeout(function(){ alert('It worked.'); })">