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

时间:2012-03-05 01:33:17

标签: html ios checkbox uiwebview cordova

在iOS上填写网页上的表单时,键盘上的“下一个”和“上一个”按钮就像真正键盘上的Tab键一样。我们有一个Web应用程序,我使用PhoneGap将其实现为应用程序,而Next和Previous按钮跳过复选框,好像它们不存在一样。

有没有办法让Next和Previous按钮与iOS上的PhoneGap / UIWebView / Safari复选框一起使用?

2 个答案:

答案 0 :(得分:2)

只需使用HTML即可模拟。

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

以下是a jsbin example您可以edit the source。关于这个例子的注释:

  • 不要使用<fieldset> - 使用长按输入强制选择文本 - 在jsbin的编辑模式中关闭iOS 6(必须与jsbin代码或iframe进行一些交互),并隐藏总是(这对于这种情况听起来很有用但不是!)。在我看来,由于一个糟糕的Safari bug(但我没有真正调查它,并且因为太麻烦而没有报告它。)

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

  • 我没有花太多时间为专注的复选框找到一个好的风格 - 如果有人想出更好的东西请发表评论。

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

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

  • 这不是标准的iOS用户界面行为,因此在转到其他应用时会让用户感到困惑,或者有其他负面影响。未来的Mobile Safari版本可以轻松破解解决方案。

  • 我尝试了几种隐藏插入符号的方法,最有效的方法似乎是使用-webkit-transform: scale(0.01); transform: scale(0.01);。使用font-size:1px;几乎可以工作但导致iPhone在输入变焦时变焦(测试iPad iOS5并且它没有变焦,测试iPhone iOS6并且它放大了)。

答案 1 :(得分:0)

简短的回答是“这是一个特色”。这就是它的方式,可能是因为Apple不希望人们对他们需要按哪个按钮以切换复选框感到困惑。