Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bradfrost opened this issue Mar 26, 2012 · 5 comments
Open

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

bradfrost opened this issue Mar 26, 2012 · 5 comments

Comments

@bradfrost
Copy link

@bradfrost bradfrost commented Mar 26, 2012

Summary

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

Platforms

iOS

How to Reproduce

Add
<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

http://bradfrostweb.com/demo/ios-focus/

Workarounds

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

@toddparker
Copy link
Collaborator

@toddparker toddparker commented Mar 26, 2012

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.

@hober
Copy link

@hober hober commented Aug 27, 2012

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.

@toddparker
Copy link
Collaborator

@toddparker toddparker commented Aug 28, 2012

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?

@johnholtripley
Copy link

@johnholtripley johnholtripley commented Aug 28, 2012

There is a workaround - adding an empty 'onclick' to a parent element worked for me. More ideas here: http://stackoverflow.com/questions/5421659/html-label-command-doesnt-work-in-iphone-browser

@SelenIT
Copy link

@SelenIT SelenIT commented Sep 28, 2014

It seems that in iOS 7 this behavior has been fixed. In your example both labels work identically for me (iOS 7.1.2 on iPad Mini 1).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants