Workaround iPhone's browser not honoring the <label> element

Posted by Sorin Comanescu on Stack Overflow See other posts from Stack Overflow or by Sorin Comanescu
Published on 2010-06-14T08:51:44Z Indexed on 2010/06/14 9:12 UTC
Read the original article Hit count: 371

Filed under:
|

Hi,

Just ran into this recently and I thought it'd be helpful to share.

The HTML <label> element is supported in a weird way by iPhone's (v3) browser. Try this:

<input type="checkbox" id="chkTest" /><label for="chkTest">Click me!</label>

Tapping the "Click me!" label has no effect, the checkbox is not checked.

Lack of support in a touch device for <label> elements puzzled me and I tried to overcome this issue by using javascript. The surprise came when a I noticed a void javascript like the one below also did the trick:

<input type="checkbox" id="chkTest" /><label for="chkTest" onclick="javascript:void(0);">Click me!</label>

HTH

Further info:

  1. Also works with an empty handler: onclick=""
  2. Disabling JavaScript inactivates again the label, even if using the empty handler.

© Stack Overflow or respective owner

Related posts about iphone

Related posts about iphone-web