1

我正在使用 Worklight 6.0.0.1 Enterprise Edition 并更新现有应用程序以使用 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>

我将不胜感激任何朝着正确方向提出的建议或点头。

谢谢，克里斯

4

1 回答 1

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 。但是，<a href="https://issues .apache.org/jira/browse/CB-4862" rel="nofollow">https://issues.apache.org/jira/browse/CB-4862 似乎暗示应该为 iOS 设置 height:device-height 7... 毫无疑问，iOS 7 引入的变化仍然会带来很多痛苦。
  • 对于 Dojo Mobile，该问题在https://bugs.dojotoolkit.org/ticket/17505中进行了跟踪。
于 2013-10-16T16:51:19.083 回答