Tapping on <label> in Mobile Safari
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?
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
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.
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.
<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.
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 there is already an onclick attribute, one should not override it and in my test, it worked (the onclick attribute) and clicked the checkbox too. so my solution is:
<script type="text/javascript">
var labels = document.getElementsByTagName("LABEL");
var labels_l = labels.length;
for(var l = 0; l < labels_l; l++){
if(labels[l].hasAttribute("for") && (!labels[l].hasAttribute("onclick"))){
labels[l].onclick = function () {};
}
}
</script>
I just solved my similar problem like this:
input {
position: absolute;
width: 120px; // size of my image
height: 100px; // size of my image
opacity: 0;
display: inherit; // Because i'm hidding it on other resolutions
}
Some really odd behavior has been happening for me where none of the above would fix it. If I had place text or images inside the label element, clicking on that element did not work. However when i added margin and a padding to the label, clicking on the margin or padding but not on the text/images did work. So what I did was make the label a 100% w 100% h absolutely positioned over my text & images.
<div class="wrapper">
<label class="label-overlay" for="file"></label>
<img src="something.png">
<p>Upload File</p>
<input type="file" name="file">
</div>
<style>
.wrapper{display:inline-block;}
.label{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;}
</style>
加载中,请稍侯......
精彩评论