html - 在触摸移动设备上激活单选标签

标签 html radio-button touch label

我制作了一个用于下订单的 html 向导。有四个步骤,每个步骤都是一堆单选按钮。我将每个单选按钮标签重新设计为大按钮(并隐藏了单选输入本身)。这一切在经典 PC 上都非常有效。但是我遇到了移动设备(iPhone 和 iPAD,我无法在其他设备上测试,因为我没有)的问题,它们无法选择单选按钮。

我只找到了 one notice这个问题在 stackoverflow 上,但是那里发布的解决方案也不起作用。

原创灵感来自apple online store用于选择不同颜色的设备。

我的示例代码:

<label class="option" for="edit-term-worker">
<input id="edit-term-worker" class="form-radio" type="radio">
<span class="worker-name">Sandra</span>
</label>

是需要一些 JS,还是我的代码有缺陷?

谢谢大家的帮助。

最佳答案

你试过吗?

<input id="edit-term-worker" class="form-radio" type="radio" />
<label class="option" for="edit-term-worker"  onclick="">
<span class="worker-name">Sandra</span>
</label>

编辑:添加了一个空的 onclick,根据这个应该可以解决问题:HTML <label> command doesn't work in Iphone browser

注意不要把单选按钮放在label标签里面,它应该在外面。

关于html - 在触摸移动设备上激活单选标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9963775/

相关文章:

javascript - 在悬停时为字体大小设置动画时出现闪烁问题

javascript - Toggle 在 Web 上工作但不在 CRM 2013 中工作的 Div

javascript - 单击弹出窗口中的注册或登录按钮后如何使弹出窗口保留

javascript - 如何使用热键检查 jquery 中的单选按钮

javascript - 提交此表单后如何弹出消息?

Android AlertDialog 不显示单选按钮或消息

javascript - 通过单选按钮启用\禁用元素

android - Opengl-es Android 和 TouchEvents

javascript - 如何在 Phaser 中获取 Sprite 的 activePointer 按下持续时间

javascript - 带多点触控登录的主页