jQuery Mobile - 在 iOS 上中断表单输入（在 iframe 中）答案

【问题标题】：jQuery Mobile - Breaks form entry (in iframes) on iOSjQuery Mobile - 在 iOS 上中断表单输入（在 iframe 中）
【发布时间】：2014-03-06 23:42:33
【问题描述】：

似乎 jQuery mobile 和 iframe 不能很好地发挥作用。

首先，我们知道 iframe 是个坏主意 - 但在这种情况下，我们需要使用它来将表单加载到我们的页面中 - 启用 jQuery Mobile 触摸功能。

现在，这在所有桌面设备上都可以正常工作，但在 iOS 上 - 似乎当您选择 iframe 中的表单域并滚动时 - 表单域失去焦点并且您无法再输入文本（即使 iOS键盘仍然可见）。当表单中有验证码字段并且用户需要滚动查看密码时，这有点问题。

对此的任何解决方案将不胜感激！谢谢！

【问题讨论】：

标签： forms jquery-mobile mobile iframe

【解决方案1】：

在 ios 中，iframe 中的滚动条被移除并将它们呈现为块。我为这个解决方案所做的是将 iframe 包装在一个 div 中，并让 iframe 根据

<div id="myIframeParentDiv" class="myIframeParentDivClass"> <iframe style="z-index:2000" id="myIframe" width="100%" height="100%" src="" frameborder=0 ALLOWTRANSPARENCY="true" > <p>Booking Engine error! your browser does not support iframes.</p> </iframe> </div>

风格

#myIframeParentDiv{
    height: 100%;
    width: 100%;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
}

【讨论】：