Menu
Tapping on <label> does not auto-focus linked in Mobile Safari but If an empty function as clickhandler is defined
like this
document.getElementById("test_label").onclick = function () {};
solves the problem.
This is the full source code.
<body>
<input type="checkbox" id="test" name="test">
<label for="test" id="test_label">This is the label</label>
<script>
document.getElementById("test_label").onclick = function () {};
</script>
</body>
Do you know why it works?
844
People using FastClick:
Use this CSS:
label > * {
display: block;
pointer-events: none;
}
see this issue: https://github.com/ftlabs/fastclick/issues/60
and this codepen: http://codepen.io/visnup/pen/XJNvEq
131
We were able to work around this issue at Etsy by simply adding this single line of code to our global javascript file.
$('label').click(function() {});
We are using the xui micro js library and that line simply attaches an empty click handler to all label elements. For some reason, this magically fixes the issue on mobile safari.
23
It looks like you found a bug in iOS Safari. Congratulations! Finding and reporting bugs is addictive.
You can report this and other bugs to Apple at https://bugreport.apple.com/. Apple might not follow up immediately, but at some point in the future they should notify you that it was a duplicate of an existing bug, that they don’t consider it a bug, or (if you’re lucky) that you should test it again in a new version of iOS.
In the mean time, hold onto this workaround — you’ll need it.
30
<label for="myID" onclick="">
<input type="checkbox" id="myID" name="myNAME">
<span class="name-checkbox"> My name for my checkbox </span>
<span class="some-info">extra informations below</span>
</label>
To enable the tap on iOS everywhere on the label tag, you need to add to its direct children (expect input), pointer-events: none;
.name-checkbox, .some-info {
pointer-events: none;
}
i know it's not really nice markup: I just hardcoded an empty onclick like this onclick="" on each label. That worked on a wrapping label:
<label for="myID" onclick="">
<input type="checkbox" id="myID" name="myNAME">
Check to check
</label>
In iOS 7, this issue still persists without any of the workarounds working for me.
My solution was to combine the click event with touchend:
var handler = function(e) { /* do stuff */ };
$("ol input[type=checkbox] ~ label")
.on('touchend', handler)
.on('click', handler);
Some helpful info in this JQuery issue: http://bugs.jquery.com/ticket/5677 Especially the part where it says technically there is no click event on mobile.
42
adding onclick attribute would fix the problem.
<label for="test" id="test_label" onclick="">
or you can let for="", and focus input when click the label, here is the code work in react
<input ref={(node) => { this.input = node; }} />
<label htmlFor="" onClick={() => { this.input.focus();}}/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
