Mohamed Hussain Mohamed Hussain - 17 days ago 6
HTML Question

Why is blur event not fired in iOS Safari Mobile (iPhone / iPad)?

I've two event handlers bound to an anchor tag: one for focus and blur.

The handlers fire on desktop, but in iphone and ipad only focus is fired correctly. Blur is not fired if I click outside the anchor tag (blur fires only when I click some other form elements in the page):

$("a").focus(function(){
console.log("focus fired");
});

$("a").blur(function(){
console.log("blur fired");
});


HTML:

<html>
<form>
<a href="#">test link</a>
<div>
<input type="text" title="" size="38" value="" id="lname1" name="" class="text">
</div>
<div style="padding:100px">
<p>test content</p>
</div>
</form>
</html>

Answer

If an anchor has any events attached, the first tap on it in iOS causes the anchor to be put into the hover state, and focused. A tap away removes the hover state, but the link remains focused. This is by design. To properly control an application on iOS, you need to implement touch-based events and react to those instead of desktop ones.

There is a complete guide to using Javascript events in WebKit on iOS.

Comments