Question

我正在使用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>

我非常感谢任何有正确方向的建议或点头。

谢谢，克里斯

Answer 1

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

在我在iOS 7的iPhone和iPad上使用Cordova 3.1进行的第二轮实验和测试中，以下是诀窍：

不在元标记中定义height：device-height，同时向输入元素（不一定是Dojo小部件）添加“click”事件的监听器，比如说

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

或

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

并按如下方式定义函数：

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

解释和一些评论：

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

Worklight 6.0.0.1和iOS 7键盘

1 个答案: