Worklight 6.0.0.1 和 iOS 7 键盘

Posted

技术标签:

【中文标题】Worklight 6.0.0.1 和 iOS 7 键盘【英文标题】：Worklight 6.0.0.1 and iOS 7 Keyboard 【发布时间】：2013-10-15 14:52:22 【问题描述】：

我正在使用 Worklight 6.0.0.1 企业版并更新现有应用程序以使用 ios7。该应用程序建立在 Dojo 之上，特别是使用了 dojox/app 框架。

一个问题给我带来了很大的困难，即键盘。在我们的应用程序中，一些视图具有输入文本字段。在早期版本的 iOS 中，当用户在文本字段中单击时，视图会向上滚动以显示在用户键入时处于焦点的输入。

在 iOS 7 中，键盘只出现在屏幕上。视图不会向上滚动，如果输入字段朝向屏幕底部，则会被键盘覆盖。更糟糕的是，如果键盘覆盖了一个字段，它就会失去焦点，这意味着屏幕底部附近的所有字段都无法操作。我发现的一种解决方法是在元标记中设置高度：

<meta content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">

这很好用，直到我在设备上更改为横向。当我以纵向模式打开和关闭键盘时，屏幕不会重新调整回正确的大小，并且 dojox/mobile/ScrollableView（包含所有内容）仍然向上推。键盘所在的下方有一个空白面板。

认为这可能与我们的应用程序有关，我尝试使用新的 Worklight 应用程序进行测试。我创建了一个新项目，并在主 html 文件的正文中添加了一些文本，并在底部添加了一个输入文本字段。结果与上述情况类似。在这种情况下，视图被向上推，包含内容的 dojox/mobile/ScrollableView 被推得太远。可滚动视图和键盘之间有一个空白面板。

我看到了许多与键盘和滚动相关的线程，包括在 config.xml 中配置设置的建议：KeyboardShrinksView、HideKeyboardFormAcccessoryBar 和 DisallowOverscroll。这些都没有解决问题。

很遗憾，我无法发布屏幕截图来准确地向您展示我所看到的（没有足够的声望点），但这是我上面提到的非常简单的测试应用程序的主体：

<body id="content" style="display: none;">
    <div data-dojo-props="selected:true" data-dojo-type="dojox.mobile.ScrollableView" id="view0">
            <!--application UI goes here-->
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            <input data-dojo-type="dojox/mobile/TextBox"></input>
        </div>
    <script src="js/initOptions.js"></script>
        <script src="js/KeyboardTest.js"></script>
        <script src="js/messages.js"></script>
</body>

我非常感谢任何朝着正确方向提出的建议或点头。

谢谢， 克里斯

【问题讨论】：

我们遇到了这个问题，只是键盘向上推了我们的标签栏并挡住了我们的字段。我们现在解决这个问题的方法是使用 xcode4.6 和 iphone 6 sdk 进行编译 你试过没有 Dojo 吗？ 另外，这里的最佳答案对您有帮助吗：***.com/questions/18970865/… 我已经在没有 Dojo 的情况下尝试过，是的，在上面的简单示例中，它确实可以正常工作。默认情况下，带有内置 Dojo 库的新 Worklight 项目使用 ScrollableView 围绕正文中的内容，一旦完成，一切都会中断。它似乎肯定是相关的，但我不认为结论应该是如果您使用的是 iOS 7，Worklight 不支持 Dojo ......关于您链接到的问题的答案，不，它没有不幸的是，帮助。我以前试过。 据我所见，Dojo Mobile ScrollableView 无法在没有 Dojo 的情况下工作的原因是 Dojo 依赖焦点事件来更新滚动位置。因此，在录制字段时缺少自动滚动将是缺少焦点事件的副作用（请参阅issues.apache.org/jira/browse/CB-5115）。 【参考方案1】：

编辑：这个答案适用于 Cordova 3.1 和 Dojo 1.9.1+。

在我在 iOS 7 下的 iPhone 和 iPad 上使用 Cordova 3.1 进行的第二轮实验和测试中，以下方法起到了作用：

不在元标记中定义 height: device-height，同时向您的输入元素（不一定是 Dojo 小部件）添加“点击”事件的侦听器，例如

<input onclick="onInputClick(event);" data-dojo-type="dojox/mobile/TextBox">

或

<input onclick="onInputClick(event);">

并定义函数如下：

onInputClick = function(e)
    e.target.focus();
;

解释和一些备注：

当元标记中不存在 height:device-height 时，当您点击输入字段时不会出现“焦点”事件（添加 device-height 可以解决此问题，但会在横向时产生副作用）。不同的是，当使用键盘顶部的上一个/下一个箭头从一个输入字段导航到另一个输入字段时，会发出焦点事件。 Dojo 移动可滚动容器使用焦点事件来调整滚动，以便在显示键盘后字段可见。由于点击输入字段时没有焦点事件，因此未进行此调整... 请注意，Cordova 3.1 文档指出：“iOS 7 问题：从您的元标记“viewport”属性中删除值“width=device-width, height=device-height””(http://cordova.apache.org/docs/en/3.1.0/guide_platforms_ios_upgrading.md.html#Upgrading%20iOS)。从中它似乎 Cordova 建议不要使用 height:device-height。但是，https://issues.apache.org/jira/browse/CB-4862 似乎暗示应该为 iOS 7 设置 height:device-height ......当然，iOS 7 引入的更改仍然是产生很大的痛苦。 对于 Dojo Mobile，该问题在 https://bugs.dojotoolkit.org/ticket/17505 中进行跟踪。

【讨论】：

我重现了 Cordova 3.1 中的问题，输入焦点在没有 Dojo 的 iOS 7 上，我提交了issues.apache.org/jira/browse/CB-5115。 嗨，阿德里安。感谢您提供链接并感谢您打开错误报告！不幸的是，即使您发布的解决方法也不适用于 Worklight。我测试了该代码，当我单击输入时，键盘会出现并立即消失。输入获得焦点，但一旦键盘开始上升，焦点就会被赋予身体。 WL 未使用 Cordova 3.1，因此您建议的解决方法可能暂时不起作用。 好的，我将使用您的 WL 和 Cordova 版本进行测试。可以肯定的是，您在使用您在最初问题中发布的代码时遇到了这种不当行为，对吗？此外，您的代码导入的 KeyboardTest.js 中是否有任何相关内容？ 确实，我提供的解决方法代码依赖于 Dojo 1.9.1 中引入的代码，因此仅适用于 Dojo 1.9.1 或更高版本，而 WL 6.0.0.1 随附于 Dojo 1.9.0 .但是，根据我的测试，只需将 Dojo 版本升级到 1.9.1 就足以解决 WL 6.0.0.1 的问题！ （续）在我的测试中，我使用了一个默认的 WL Dojo 项目（包括元标记中的 width=device-width），仅更改了方向支持以使应用程序变成横向.要更改 Dojo 版本：在磁盘上安装 download.dojotoolkit.org/release-1.9.1/…，然后：New Worklight Project > Dojo Installation > New Dojo Library > On Disk。让我知道这是否适合您...

以上是关于Worklight 6.0.0.1 和 iOS 7 键盘的主要内容，如果未能解决你的问题，请参考以下文章

IBM Worklight 6.0.0.1 - jQuery 调色板不显示

IBM Worklight 6.0.0.1 - Dojo Mobile 图形不出现

IBM Worklight 6.0.0.1 - 部署 .wlapp 时出错

IBM Worklight 6.0.0.1 - 部署到生产服务器时无法初始化 Worklight Project

IBM Worklight 6.0.0.1 - 应用程序认证

IBM Worklight 6.0.0.1 - 将适配器部署到服务器时出错