html - 使上一个/下一个按钮在 iOS 上的复选框上起作用

Question

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

有没有办法让“下一个”和“上一个”按钮与 iOS 上的 PhoneGap/UIWebView/Safari 的复选框一起使用？

Answer 1

这可以仅使用 HTML 进行模拟。

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

这里是a jsbin example你可以edit the source 。关于此示例的注释:

• 不要使用<fieldset> - 使用长按输入强制选择文本会在 jsbin 的编辑模式下关闭 iOS 6(必须与 jsbin 代码或 iframe 进行某种交互)，并始终隐藏插入符号(这听起来对这种情况很有用，但事实并非如此!) 。在我看来，这是由于 Safari 的一个严重错误(但我没有真正调查它，也没有报告它，因为太麻烦了。)

• visibility:hidden;使用<option>的想法元素不起作用，因为如果用户触摸某个选项，键盘就会隐藏。

• 我没有花太多时间寻找用于焦点复选框的好样式 - 如果有人想出更好的东西，请发表评论。

• jsbin 示例中存在一些垃圾内容，这些内容无法隐藏闪烁的插入符号。如果有更简洁的解决方案来隐藏插入符号，我会很感兴趣。

• 需要进行一些浏览器嗅探才能将此修复仅应用于 iOS 设备。

• 这不是标准的 iOS UI 行为，因此在访问其他应用程序时可能会让用户感到困惑，或者产生其他负面影响。解决方案很容易被 future 版本的 Mobile Safari 破坏。

• 我尝试了几种不同的隐藏插入符号的方法，最有效的似乎是使用 -webkit-transform: scale(0.01); transform: scale(0.01); 。使用字体大小:1px；几乎可以工作，但会导致 iPhone 在输入获得焦点时缩放(测试 iPad iOS5 并且它没有缩放，测试 iPhone iOS6 并且它缩放)。