在触摸移动设备上使单选按钮标签处于活动状态
- 论坛
- 在触摸移动设备上使单选按钮标签处于活动状态
8 浏览
在触摸移动设备上使单选按钮标签处于活动状态
我已经制作了一个用于下订单的HTML向导。有四个步骤,每个步骤中都有一组单选按钮。我将每个单选按钮的标签重新设计成了大按钮(并隐藏了单选输入本身)。这在经典PC上都很好用。但是在移动设备(iPhone和iPad,我无法在其他设备上测试,因为我没有)上遇到了问题,无法选择单选按钮。\n我只在stackoverflow上找到了一个关于这个问题的通知,但那里发布的解决方案也不起作用。\n最初的灵感来自于苹果在线商店,用于选择不同颜色的设备。\n我的示例代码:\n
\n这里需要一些JS,还是我的代码有缺陷?\n非常感谢大家的帮助。
匿名的
0 Comments
问题出现的原因:在移动设备上,点击label标签时无法激活对应的radio按钮。
解决方法:在label标签上添加空的onclick属性,使整个label标签可点击,并解决无法激活radio按钮的问题。
下面是具体的解决方法的代码示例:
这种方法在移动设备上测试通过,可以通过在label标签上添加onclick属性来解决在iPhone浏览器上无法激活radio按钮的问题。这种方法也适用于form元素,如果希望最小化内联javascript,可以将onclick属性添加到每个label标签上。这种方法虽然在iPad上表现奇怪,但在移动设备上测试通过,可以解决问题。