Tapping on

前端 未结 11 626
有刺的猬
有刺的猬 2021-01-30 21:51

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

document.getElem         


        
相关标签:
11条回答
  • 2021-01-30 22:18
    <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;
        }
    
    0 讨论(0)
  • 2021-01-30 22:26

    adding onclick attribute would fix the problem.

    <label for="test" id="test_label" onclick="">
    
    0 讨论(0)
  • 2021-01-30 22:31

    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>
    
    0 讨论(0)
  • 2021-01-30 22:32

    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>
    
    0 讨论(0)
  • 2021-01-30 22:32

    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>
    
    0 讨论(0)
提交回复
热议问题