Mohamed Hussain Mohamed Hussain - 1 year ago 162
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):

console.log("focus fired");

console.log("blur fired");


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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download