Dojo 对话框、iPad 和虚拟键盘问题答案

【问题标题】：Dojo dialog, the iPad and the virtual keyboard issueDojo 对话框、iPad 和虚拟键盘问题
【发布时间】：2010-06-17 01:28:17
【问题描述】：

最近，我一直在从事一个界面应该适用于台式机和平板电脑（尤其是 iPad）的项目。

我遇到的一个问题是在进行文本输入时 iPad 上的 Dojo 对话框。

基本上是这样的：

在 iPad 上使用按钮加载 Dojo 界面 - 好的
按下按钮（触摸）以显示对话框（90% 的高度和宽度）- 确定
点击文本框（触摸），如 DateTextBox 或 TimeTextBox - OK，虚拟键盘打开
在 UI 中单击我想要的日期或时间（触摸）- 好的，但我看不到所有选项，因为它比屏幕尺寸长...
尝试向下滚动（用两根手指向上滑动或单击键盘中的“下一步”） - 不正常，对话框会重新定位，使其位于视口区域的顶部。

基本上，问题在于对话框不断尝试重新定位。

如果我捕捉到窗口 onResize 事件，我是否能够停止对话框调整大小和定位？

还有其他人对 iPad 和 Dojo 对话框有这个问题吗？

另外，我发现了关于检测虚拟键盘的 StackOverflow 主题，但在这种情况下并没有太大帮助......

iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

谢谢！

【问题讨论】：

标签： ipad keyboard dialog dojo

【解决方案1】：

我昨天刚遇到同样的问题，发现了一个 hack，这不是一个优雅的解决方案。如果您想阻止 dijit.Dialog 重新定位，您可以：

1) 设置 dijit.Dialog 对象的属性 ._relativePosition （在这种情况下它是“pop”）在调用方法 pop.show() 之后：

pop.show();
pop._relativePosition = new Object(); //create empty object

接下来的步骤可能是：

检查浏览器类型和操作系统：dojo 甚至更好BrowserDetect
检查何时激活虚拟键盘并禁用重新定位
使用自定义类扩展 dijit.Dialog（处理所有异常）

【讨论】：

【解决方案2】：

建议另一种方法是通过扩展对象（或者可能是相对位置或其他方法）来覆盖 _position 函数。这是我的解决方案，它只允许将对话框定位在屏幕中间一次。通过玩隐藏和显示事件可能有更好的方法来改变这一点，但这符合我的需要。

dojo.provide("inno.BigDialog");
dojo.require("dijit.Dialog");
dojo.declare("inno.BigDialog",dijit.Dialog,{
    draggable:false,
    firstPositioned : false,
    _position : function() {
        if (!dojo.hasClass(dojo.body(), "dojoMove") && !this.firstPositioned) {
            this.firstPositioned = true;
            var _8 = this.domNode, _9 = dijit.getViewport(), p = this._relativePosition, bb = p ? null
                    : dojo._getBorderBox(_8), l = Math
                    .floor(_9.l
                            + (p ? p.x : (_9.w - bb.w) / 2)), t = Math
                    .floor(_9.t
                            + (p ? p.y : (_9.h - bb.h) / 2));
            if (t < 0) // Fix going off screen
                t = 0;
            dojo.style(_8, {
                left : l + "px",
                top : t + "px"
            });
        }
    }
});

【讨论】：

【解决方案3】：

你可以重写 _position 函数并且只调用超类的 _position 函数一次。（见http://dojotoolkit.org/reference-guide/dojo/declare.html#calling-superclass-methods）

if (!dojo._hasResource["scorll.asset.Dialog"]) {
    dojo._hasResource["scorll.asset.Dialog"] = true;
    dojo.provide("scorll.asset.Dialog");

    dojo.require("dijit.Dialog");

    dojo.declare("scorll.asset.Dialog", [dijit.Dialog], {
        _isPositioned: false,
        _position: function () {
            if(this._isPositioned == false) {
                // Calls the superclass method
                this.inherited(arguments);
                this._isPositioned = true;
            }
        }
    })
}

【讨论】：