Skip to content
This repository

iOS: input labels don't focus on associated fields #13

bradfrost opened this Issue March 26, 2012 · 4 comments

4 participants

Brad Frost Todd Parker Edward O'Connor John Holt Ripley
Brad Frost


Tapping a label doesn't put focus in the associated input field in iOS.



How to Reproduce


<label for="field">Label</label>
<input id="field" type="text" />

In normal browsers, clicking on the label will focus you in the associated field declared by the for attribute. However, tapping the label in iOS does nothing.

Reduced Example


Adding a script: How to fix the broken iPad form label click issue

Todd Parker

This one is a real pain for checkboxes and radiobuttons because the label doesn't toggle the state of the controls. Sure makes hitting a native check or radio really tricky with a finger.

Edward O'Connor

This is not a bug.

Tapping a label and having the labelled control be activated is specified to be platform-dependent, because the behavior is supposed to match local platform conventions. Browsers on Windows differ from browsers on Mac which differ from mobile WebKit in this.

Todd Parker

This behavior may not be part of the spec, but it is convention on all other browsers. It's mystifying that a touch based browser like mobile Webkit would break with convention to make it more difficult to tap small UI elements like checkboxes and radiobuttons. What could be the rationale?

John Holt Ripley

There is a workaround - adding an empty 'onclick' to a parent element worked for me. More ideas here:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.