使上一个/下一个按钮适用于 iOS 上的复选框答案

【问题标题】：Make Previous/Next buttons work on checkboxes on iOS使上一个/下一个按钮适用于 iOS 上的复选框
【发布时间】：2012-03-05 01:33:17
【问题描述】：

在 iOS 上，当在网页上填写表单时，键盘上有 Next 和 Previous 按钮，其作用类似于真实键盘上的 Tab 键。我们有一个 Web 应用程序，我使用 PhoneGap 将其实现为一个应用程序，并且 Next 和 Previous 按钮跳过复选框，就好像它们不存在一样。

有没有什么方法可以在 iOS 上使用 PhoneGap/UIWebView/Safari 使 Next 和 Previous 按钮与复选框一起使用？

【问题讨论】：

【解决方案1】：

这可以仅使用 HTML 来模拟。

在复选框之前插入一个文本输入元素。添加 JavaScript，以便当输入具有焦点时按下某个键会更改复选框状态。

这里是a jsbin example，你可以edit the source。关于此示例的说明：

不要使用<fieldset> - 使用长按输入强制选择文本 - 在 jsbin 的编辑模式下关闭 iOS 6（必须与 jsbin 代码或 iframe 进行一些交互），并始终隐藏插入符号（这听起来对这种情况很有用，但不是！）。在我看来是因为 Safari 的一个错误错误（但我并没有真正研究它，也没有报告它，因为太麻烦了。）
使用<option> 元素的visibility:hidden; 想法不起作用，因为如果用户触摸某个选项，那么键盘就会隐藏。
我并没有花太多时间为重点复选框寻找合适的样式 - 如果有人提出更好的建议，请发表评论。
jsbin 示例中有一些垃圾内容，用于隐藏闪烁的插入符号的想法。如果有隐藏插入符号的更简洁的解决方案，我会很感兴趣。
需要进行一些浏览器嗅探才能将此修复应用到 iOS 设备。
这不是标准的 iOS UI 行为，因此在转到其他应用程序时可能会使用户感到困惑，或产生其他负面影响。未来版本的 Mobile Safari 很容易破坏解决方案。
我尝试了几种不同的隐藏插入符号的方法，最有效的似乎是使用-webkit-transform: scale(0.01); transform: scale(0.01);。使用字体大小：1px；几乎可以工作，但是当输入获得焦点时会导致 iPhone 缩放（测试 iPad iOS5 并且它没有缩放，测试 iPhone iOS6 并且它缩放）。

【讨论】：

这是一个可行的解决方法，但我们提出的解决方案是让客户相信，与设备的默认行为不同是个坏主意。
需要进行一些更改才能在 Android 上运行。具体来说，如果输入的 px 高度很小（2px 不起作用），Chrome 将不会显示键盘，并且键盘捕获需要在 keydown 上，而不是 keypress - 请参阅jsbin.com/ulapab/2

【解决方案2】：

简短的回答是“这是一项功能”。就是这样，可能是因为 Apple 不希望人们对需要按下哪个按钮来切换复选框感到困惑。

【讨论】：