Tapping on in Mobile Safari

Question

Tapping on does not auto-focus linked in Mobile Safari but If an empty function as clickhandler is defined like this

document.getElem         


        

Answer 1

<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;
    }

Answer 2

adding onclick attribute would fix the problem.

<label for="test" id="test_label" onclick="">

Answer 3

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>

Answer 4

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>

Answer 5

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>