Question

点击<label>不会在Mobile Safari中自动对焦关联，但如果定义了一个空函数作为点击处理程序像这样

document.getElementById("test_label").onclick = function () {};

解决了这个问题。

这是完整的源代码。

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

你知道它为什么有效吗？

Answer 1

我们只需将这一行代码添加到我们的全局javascript文件中，就可以在Etsy解决此问题。

$('label').click(function() {});

我们正在使用xui micro js库，该行只是将空单击处理程序附加到所有label元素。出于某种原因，这神奇地修复了移动游猎的问题。

Answer 2

您好像在iOS Safari中发现了一个错误。恭喜！查找和报告错误会令人上瘾。

您可以在https://bugreport.apple.com/向Apple报告此错误和其他错误。 Apple可能不会立即跟进，但在将来的某个时候，他们应该通知您它是现有错误的副本，他们不认为这是一个错误，或者（如果你很幸运）你应该测试它再次出现在iOS的新版本中。

与此同时，请坚持这个变通方法 - 你需要它。

Answer 3

div.page.homepage {
    position: relative;
    background: @skyscrapers no-repeat center center fixed;
    .background-size(cover);
    min-height:1080px;
    z-index:10;
}

div#homepage-cards {
    display:inline-block;
    position:absolute;
    top:40%;
    left:50%;
    .translate(-50%, -50%);

    div.homepage-card {
        display:inline-block;
        text-align:center;
        background-color:#ffffff;
        padding:56px 60px 100px 60px;
        float:left;
        margin-right:30px;
        margin-bottom:30px;
        &:nth-child(2n+2) {
            margin-right:0;
        }
        &:nth-child(3) {
            clear:left;
        }
        h2 {
            margin-top:25px;
            text-transform: lowercase;
            font-weight:bold;
        }
    }

}

要在标签标签上的任何位置启用iOS，您需要添加到其直接子节点（期望输入），指针事件：无;

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

Answer 4

我知道这不是很好的标记：我只是在每个标签上硬编码了一个像onclick=""这样的空onclick。这适用于包装标签：

<label for="myID" onclick="">
 <input type="checkbox" id="myID" name="myNAME">
 Check to check
</label>

Answer 5

在iOS 7中，如果没有任何可行的解决方法，这个问题仍然存在。

我的解决方案是将click事件与touchend：

结合起来

var handler = function(e) { /* do stuff */ };
$("ol input[type=checkbox] ~ label")
  .on('touchend', handler)
  .on('click', handler);

此JQuery问题中的一些有用信息：http://bugs.jquery.com/ticket/5677特别是技术上说在移动设备上没有click事件的部分。

Answer 6

添加onclick属性可以解决问题。

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

Answer 7

或者你可以让for =“”，并在点击标签时聚焦输入，这里是代码工作中的反应

<input ref={(node) => { this.input = node; }} />

<label htmlFor="" onClick={() => { this.input.focus();}}/>

Answer 8

如果已经存在onclick属性，则不应该覆盖它，在我的测试中，它工作（onclick属性）并单击该复选框。所以我的解决方案是：

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

Answer 9

我刚刚解决了类似的问题：

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
}

Answer 10

对我来说，一些奇怪的行为一直在发生，而上述情况都没有解决。如果我在label元素中放置了文本或图像，则单击该元素不起作用。但是，当我在标签上添加边距和填充时，单击边距或填充但不在文本/图像上确实有效。所以我所做的就是让标签100％w 100％h绝对定位在我的文字和文字上。图片。

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

点击Mobile Safari中的<label> </label>

10 个答案: