PhoneGap / Sencha Touch：隐藏软键盘时的 WebView 渲染问题答案

【问题标题】：PhoneGap / Sencha Touch: WebView render issue on hide SoftKeyboardPhoneGap / Sencha Touch：隐藏软键盘时的 WebView 渲染问题
【发布时间】：2013-04-18 16:59:49
【问题描述】：

软件

我正在使用 Sencha Touch (2.1.1) 和 PhoneGap (2.5.0) 开发适用于 Android 和 iOS 的应用程序。

我的问题

在容器底部有一些带有输入字段的视图（Ext.field.Text 和Ext.field.Email）。当您点击输入字段时，Android SoftKeyboard 会显示并将整个视图推到顶部，这样输入字段就不会被键盘隐藏。

现在，当您隐藏键盘时（通过按下 Android 隐藏按钮或点击输入字段以外的任何位置），WebView 不会总是弹回，直到您再次点击 WebView。

硬件

目前我在 Nexus 4 (Android 4.2.2) 上遇到了这个问题。它在 iOS (iPhone 4/5) 甚至在 Sony XPERIA Go (Android 4.0.4) 上都能正常运行。

截图

以下是问题的一些截图：

我已经想到可以将 Android 的 windowSoftInputMode 更改为 adjustNothing，但是在隐藏键盘之前你不会看到输入的文本...

更新

Sergio 提出的 3 种缓解措施的一些方法。

第一个解决方案对我来说似乎是最好的。它只影响 Android 项目，不会膨胀我的 JS（例如if Ext.os.is.Android ...）或 iOS 代码。不幸的是，如果我按照描述设置windowSoftInputMode，我的 Nexus 4 仍然会调整焦点并且不会恢复模糊...

第二种解决方案听起来更复杂。如果操作系统是 Android，我需要将每个（底部对齐）组件移到焦点上并恢复模糊。虽然这绝对是可能的，但可能还有另一个问题：用户可以使用设备的后退键隐藏键盘，而无需移除输入的焦点（不触发模糊）。所以我认为这不是一个合适的解决方案。

第三种解决方案适用于数字输入。但是为文本输入编写一个虚拟键盘是一项艰巨的任务：不同语言环境的键对齐方式不同（例如，y 和 z 在德语键盘上被调换），我们不会匹配用户在提供替代键盘时的期望（滑动输入、建议等）。

不要误会我的意思，我很感谢您与我分享您的缓解措施！但我还没有完全满意。

【问题讨论】：

哦，是的，我列出的都不是很好的解决方案；如果事情......像......按照他们应该的方式工作会更好：p。我没有想到键盘的本地化问题，这是一个很好的观点；那不会太好用。还有 Nexus 4 上的 windowSoftInputMode，不幸的是它在那里不起作用。祝你找到真正的解决方案好运！
我已经更新了关于 Sencha Touch 2.2.1 的答案 ...

标签： android cordova sencha-touch-2

【解决方案1】：

Sencha Touch 2.2.0 修复了这个问题！

我终于找到了合适的解决方案。 4 月 15 日，Sencha 发布了他们的 Touch 框架的 2.2.0 版本。从 2.1.0 升级后，布局恢复正常！

为了节省其他人的时间：请注意Sencha Cmd 3.1.x（2.2.0 需要）不适用于 Ruby 2.0.0。构建过程将失败并显示一些奇怪的错误消息。使用 1.9.3 可以正常工作。

更新 #2：Sencha Touch 2.2.1...

嗯.. 我刚刚升级到 Sencha Touch 2.2.1，问题又回来了！因此，如果您打算使用最新的 Sencha Touch 版本，请注意键盘可能会使您的布局崩溃：/

【讨论】：

赞美煎茶。这太棒了。
新的 Cmd 与 Ruby 2.0.0 冲突，因为它现在与 Ruby 和 Compass（以及更多）打包在一起。有趣的是，如果机器事先有 Compass 和 Ruby（例如 1.9.3），Cmd 将使用自己的 Ruby，但使用机器的 Compass 副本。

【解决方案2】：

几个月前，我花了很多时间试图解决这个问题。尝试了一堆东西，通过 Google/StackOverflow 筛选。

最终我无法做到我想要的；看起来我们对很多事情的 Sencha Touch/PhoneGap 对键盘的控制不够（简单）（在键盘位置之上，我们对“返回/去/确定”的控制基本上也为 0 button 确实如此，这在 Android 版本之间有所不同，尤其是当它是一个数字字段时。）但是：

缓解 1： windowSoftInputMode="stateUnspecified|adjustResize" 将导致键盘覆盖输入，但是一旦用户开始输入，屏幕将调整以在键盘上方显示输入，并且事情将恢复为在输入模糊时需要。至少我的三星 Galaxy S2 (2.6)、三星 Galaxy S3 (4.2) 和京瓷 Rise (4.0) 是这种情况。

缓解 2：我实施的一种解决方案是，在输入焦点上，更改输入的位置以确保它们位于键盘上方。输入模糊后，输入将更改为其原始位置。这并不理想，因为您经常会看到输入在键盘覆盖之前移动到新位置，因此看起来很笨拙。

缓解 3： 对于数字字段，我使用了 https://market.sencha.com/extensions/numpad 的修改版本，它创建了一个 虚拟键盘 并将其设置为“showBy()”所需的输入.这确保了键盘永远不会掩盖输入，并且应用程序不必处理屏幕的任何重新定位（下面的屏幕截图）。

缓解 3 的问题： 这里的问题是它仅适用于数字字段，我无法找到 Sencha Touch 的任何标准键盘插件（我的应用程序以数字为中心，因此限制是可以接受的。）也就是说，我相信你可以花几天时间使用 numpad 插件作为核心来构建一个可以以类似方式工作的虚拟键盘。

很抱歉没有完美的解决方案。我希望这会有所帮助！

【讨论】：