iOS form input blur

A clickable element is a link, form element, image map area, or any other element with mousemove, mousedown, mouseup, or onclick handlers. A scrollable element is any element with appropriate overflow style, text areas, and scrollable iframe elements. Because of these differences, you might need to change some of your elements to clickable elements, as described in Making Elements Clickable, to get the desired behavior in iOS.

 

Making Elements Clickable

Because of the way Safari on iOS creates events to emulate a mouse, some of your elements may not behave as expected on iOS. In particular, some menus that only usemousemove handlers, as in Listing 6-1, need to be changed because iOS doesn’t recognize them as clickable elements.

Listing 6-1  A menu using a mouseover handler

<span onmouseover = "..."

  onmouseout  = "..."

WHERE TO BUY

</span>

To fix this, add a dummy onclick handler, onclick = “void(0)”, so that Safari on iOS recognizes the span element as a clickable element, as shown in Listing 6-2.

Listing 6-2  Adding an onclick handler

<span onmouseover = "..."

  onmouseout  = "..."

  onclick = “void(0)”>

WHERE TO BUY

</span>