解决方法iPhone的浏览器不遵守< label>元素 [英] Workaround iPhone's browser not honoring the <label> element

问题描述

最近刚遇到这个问题，我认为分享会很有帮助.

Just ran into this recently and I thought it'd be helpful to share.

iPhone(v3)浏览器以奇怪的方式支持HTML <label>元素.试试这个:

The HTML <label> element is supported in a weird way by iPhone's (v3) browser. Try this:

<input type="checkbox" id="chkTest" /><label for="chkTest">Click me!</label>

点击点击我！"标签无效，未选中该复选框.

Tapping the "Click me!" label has no effect, the checkbox is not checked.

触摸设备中对<label>元素的缺乏支持使我感到困惑，我试图通过使用javascript来克服此问题.当我注意到一个无效的javascript(如下面的脚本)也成功了时，惊喜就来了:

Lack of support in a touch device for <label> elements puzzled me and I tried to overcome this issue by using javascript. The surprise came when a I noticed a void javascript like the one below also did the trick:

<input type="checkbox" id="chkTest" /><label for="chkTest" onclick="javascript:void(0);">Click me!</label>

HTH

更多信息:

1. 还可以使用空处理程序:onclick=""
2. 即使使用空处理程序，禁用JavaScript也会再次停用标签.

推荐答案

经过一些实验，将以下CSS规则分配给它足以触发iPhone上预期的标签行为:

After a bit of experimentation it looks like assigning the following CSS rule to is enough to trigger the expected label behaviour on the iPhone:

标签{光标:指针}

这篇关于解决方法iPhone的浏览器不遵守< label>元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！