Question

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

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

基本上就是这样：

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

基本上，问题是对话框一直试图重新定位自己。

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

有没有其他人在iPad和Dojo对话框中遇到此问题？

另外，我在检测虚拟键盘时发现了这个StackOverflow主题，但在这种情况下它没有多大帮助......

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

谢谢！

Answer 1

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

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

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

接下来的步骤可能是：

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

Answer 2

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

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"
            });
        }
    }
});

Answer 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;
            }
        }
    })
}

Dojo对话框，iPad和虚拟键盘问题

3 个答案: