HTML <label> 命令在 Iphone 浏览器中不起作用

Question

在我正在制作的 html 页面中，我尝试使用 html 和 css 使 div 可点击。这在我测试过的一些主要浏览器（Chrome、Firefox、Opera、Safari）以及 HTC 手机中运行良好，但是当我尝试在 Iphone 上测试它时，我发现它根本不起作用。复选框本身甚至无法选择。

这是我的（除了在 Iphone 上工作）代码：

HTML：

<div class="" style="height: 30px;">
        <div style="display: table; width: 100%;">
        <div style="display: table-row; width: 100%;">
        <div style="display: table-cell;">
        <label for="3171">Text....</label>
        </div>

        <div style="display: table-cell; text-align: right;">
        <input type="checkbox" id="3171" name="3171">
        </div>
        </div>
        </div>
        <label for="3171">
        <span class="blocklink">Invisible text</span>
        </label>
        </div>

CSS：

.blocklink {
    display: block;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    text-indent: -999em;
    top: 0;
    width: 100%;
}

如您所见，我使用的技术基本上只是将<label> 散布在整个父级div 上，因此无论您点击什么，它都会勾选/取消勾选链接的复选框。

很遗憾，这在 iPhone 上不起作用。是否有可能以某种方式继续使用这种技术但也提供 iPhone 支持？ （最好不使用 javascript，因为我真的很想只使用 HTML 和 CSS）

提前致谢，

阿恩

Answer 1

我将问题缩小到使用 Fastclick 库；当我从我的代码库中删除它时，我的问题就消失了，这向我表明，这里没有其他答案所建议的原生 iOS/FF 问题。

在不知道其他人正在使用的库的情况下，但知道 Fastclick 非常普遍，我是否可以建议这个错误的根本原因实际上是一个库问题 - 而不是在 Apple 发布多年后一直存在的问题！似乎更有可能。也许这里的其他人可以了解他们是否在使用 Fastclick？

更多信息

作为安全措施，某些浏览器会阻止客户端代码触发文件输入。尝试使用document.querySelector('input[type=file]').click() 从控制台触发单击事件，它会起作用，在您的代码中执行相同操作，它会神秘地失败。

我想这个错误存在的原因是因为 ontouchstart 处理程序正在通过 Fastclick 应用于 <label />。当它在触摸设备上被触发时，库会将该事件代理到 onclick 处理程序，或者在本例中是本机 <label /> 功能。不幸的是，这意味着客户端代码正在触发文件输入打开，并且被浏览器阻止。

Answer 2

我遇到了一个有点特殊的情况。我们已经在labels 中的所有spans 上使用了pointer-events: none。但是，我们随后需要在其中一个标签中添加 <a> 作为可点击标签。

<label>
    <span>Label text here. With a <a href="http://www.google.com">link text</a> here.</span>
</label>

所以，我们在那些<a> 上明确设置pointer-events: all。

label > span { pointer-events: none; }
label > span > a { pointer-events: all; }

这适用于最新的 Chrome、Firefox、IE 11 和 iOS 9 Safari。

Answer 3

如果标签中包含任何 html 元素，问题似乎在 iOS9 中仍然存在。至少发生在其中的 span 元素上。 'pointer-events: none' 修复它。

<label for="target">
  <span>Some text</span>
</label>

当用户点击“Some Text”时，上面的代码不会触发目标输入的更改，除非您添加以下css：

label span {
  pointer-events: none;
}

Answer 4

另一种解决方案——虽然更老套，但防弹——将复选框绝对定位在标签上，z-index 它，增加宽度/高度以包含底层标签，然后将不透明度设为 0。如果页面上有多个标签，这当然会很乏味......您自然也只会实现该媒体尺寸的绝对定位；无需破解整个应用环境。

Answer 5

如果您在事件处理程序（例如 onMouseEnter）上更改 DOM，这将导致跳过所有下一个处理程序，包括 onClick。

SetTimeout 不能解决这个问题。

示例： 1. 在 onMouseEnter 中使用 setTimeout 和在 DOM 中注入新 div 的函数 2. 不调用任何 onClick 处理程序。

解决方案：避免在事件处理程序中更改 DOM。

备注：发现标签标签有问题，但标签内的跨度仍然存在。任何类型标签都可能存在此问题。

这种行为仅适​​用于移动 iOS。在桌面 Safari 和 Mac OS Safari 中 - 一切正常。

Answer 6

出于某种晦涩的原因，如果您申请，请使用 CSS：

label { cursor: pointer; }

可以在 iPhone 和 iPad 上使用。

Answer 7

我通过在父元素上放置一个空的 onclick="" 来解决它：

<form onclick="">
    <input type="radio" name="option1" value="1">
    <label for="option1">Option 1</label>

    <input type="radio" name="option2" value="2">
    <label for="option2">Option 2</label>

    <input type="radio" name="option3" value="3" checked="checked">
    <label for="option3">Option 3</label>
</form>

Answer 8

在标签中添加一个空的onclick="" 会使该元素在IOS4 上再次可点击。似乎默认情况下，该操作被按住复制和粘贴文本机制阻止或取代。

<label for="elementid" onclick="">Label</label>