HTML< label>命令在Iphone浏览器中不起作用 [英] HTML <label> command doesn't work in Iphone browser

问题描述

在我创建的html页面中，我尝试使用html和css让div可点击。这在我已经测试它（Chrome，Firefox，Opera，Safari），以及一个HTC手机的一些主要浏览器，但是当我试图在Iphone上测试时，我注意到它只是没有工作完美地工作。

In a html page I am making, I tried to make div's clickable using html and css. This has worked perfectly in some major browsers I have tested it in (Chrome, Firefox, Opera, Safari), as well as an HTC phone, but when I tried to test it on Iphone I noticed it just didn't work. The checkboxes themselves weren't even selectable.

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

This is my (working apart from on Iphone) code:

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

So as you can see the technique I'm using is basicly just having a <label> spread all over the parent div so anywhere you click, it will tick/untick the linked checkbox.

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

Unfortunately, this doesn't work on IPhone. Would it be possible to somehow keep using this technique but also provide IPhone support? (Preferrably without javascript, because I'm really going out of my way to only use HTML & CSS)

提前感谢，

Arne

推荐答案

添加一个空的 onclick =到标签使得元素可以再次在IOS4上。似乎默认情况下，操作被阻止或超过按下并按住复制和粘贴文本力学。

Adding an empty onclick="" to the label makes the element clickable again on IOS4. It seems that by default the action is blocked or overtaken by the press and hold copy and paste text mechanics.

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

这篇关于HTML< label>命令在Iphone浏览器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！