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

onclick=""在标签上添加一个空格使得该元素可以在IOS4上再次点击.似乎默认情况下,按下该动作会被阻止或超越并保持复制和粘贴文本机制.

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

Answer 2

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

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

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

label span {
  pointer-events: none;
}

Answer 3

我通过在父元素上放置一个空的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 4

出于某些不明原因,使用CSS,如果您申请:

label { cursor: pointer; }

将在iPhone和iPad上运行.