移动Safari:iframe在下拉列表中形成“next-input”

时间:2013-10-29 20:44:36

标签: javascript ios iphone iframe mobile-safari

在这里寻找一些关于一个非常奇怪的bug的信息。我和另一位同事一直试图修复它。我查看了大多数(如果不是所有相关的SO帖子),但似乎没有一个直接解决这个问题。

我们有一个非常简单的移动网络表单。这种形式的流程是:

Select > Input[type=text] > Select > Select > Input[type=text] > Button

这是问题所在。当ios设备上的用户单击选择时,弹出表单助手,用户可以选择一个值。

如果用户点击表单助手中的“下一个”箭头,则关注“输入”,键盘将打开,用户可以键入。但是,没有文本输入添加到文本输入中。

这是由元素和一些日志语句上的一些jquery事件验证的。输入实际上是接收焦点,并且正在记录该输入上的每个按键事件但没有文本?!?!?!?

如果用户点击第一个选择,单击“完成”(在表单助手中),然后手动单击以下文本输入,则键输入有效,文本显示在输入中。

对于按钮之前的第二个文本输入,同样的错误以相同的方式发生。如果用户使用表单助手中的“下一个”箭头按钮,则不会将文本追加到实际输入字段。

我有几个“黑客”记住使用javascript强制这个工作,但我想避免,如果我能。但是所有这些都可能会引入其他错误,并且通过移动狩猎对焦点,模糊和点击事件的处理进一步加强了这一点。

有什么建议吗?


- 更新 -

我在苹果支持论坛上找到了一个有同样问题的人。

https://discussions.apple.com/thread/5527146

原来它与iframe中的表单有关。此外,单击的第一个输入必须是下拉列表才能重新创建问题。

  

嗨,以下是我遇到问题的链接之一   http://182.74.28.109/H3G/Main.html重现的步骤

     
      
  1. 点击提供商下拉列表。
  2.   
  3. 从下拉列表中选择一项。
  4.   
  5. 现在,不要点击“完成”,而是点击“>”。
  6.   
  7. 这会将cusor移动到Name字段。
  8.   
  9. 现在尝试在文本框中输入一些文字。
  10.   
  11. 文本框不允许输入任何内容。
  12.   

如果表单不在iframe中,则不存在。

我已通过javascript确认输入,按下“下一步”按钮后有焦点。还确认正在按下的按钮正在注册,但由于某种原因,这些值不会附加到输入本身。

这让我相信这是某种移动safari bug,这意味着它可能需要一段时间才能解决,即使有人...也不是所有旧设备都会收到它(实际上还不确定是否这存在于iOS旧设备上。)

我有一个基本的概念证明,它将检测按下的字符,解码它们并将它们附加到输入,但它最好是一个黑客。您只能到目前为止模拟本机功能。我还必须模拟特殊按钮,如某些输入的退格和空格键。作为最后一个修复,我可能会实现一个可以实现此目的的插件,但它可能没有本机输入的所有功能。我不想走这条路。

1 个答案:

答案 0 :(得分:0)

创意1)如果用小文本区域替换文本输入,它仍然不起作用吗?

创意2)创建一个虚假隐藏的输入元素来接收焦点,然后将一个事件处理程序附加到该输入(这似乎可以从您的帖子中正常工作),这将是一个更容易的黑客将传递焦点到你想要的真正的输入元素?如果以这种方式完成,聚焦元素是否可以正常工作?