Question

我正在开发一个使用Sencha Touch 2作为用户界面的小应用程序。现在我在iPad和iPhone上运行它。

我的问题是，无论何时点击文本字段，Safari都会调出虚拟键盘并将整个Web视图向上推离屏幕。

这看起来不太自然，因为顶部工具栏不再可见了。

以下是两个演示此问题的屏幕截图。在第二个屏幕截图中，您可以看到键盘可见时的效果。

有没有办法防止这种行为，让Safari 调整大小代替用户界面？

Answer 1

不幸的是，Apple想要这种行为，但someone建议使用window.scrollTo（）进行一些破解：

listeners: {
    focus: function() {
        window.scrollTo(0,0);
    }
}

Answer 2

将此代码放在app.js的启动函数中对我有用：

 if (Ext.os.is.Android) {
        Ext.Viewport.on('painted', function () {
            Ext.Viewport.setHeight(window.innerHeight);
        });
    }

    if (Ext.os.is.iOS) {

        Ext.Viewport.on('painted', function () {
            Ext.Viewport.setHeight(window.innerHeight);
        });
    }

Answer 3

我找到了一个适合我的解决方案。您将顶部栏移动到容器中。

xtype: 'container',
                docked: 'top',
                height: '100%',
                html: '',
                itemId: 'MyContainer',
                width: '100%',
                items: [
                    {
                        xtype: 'titlebar',
                        docked: 'top',
                        itemId: 'topBar',
                        title: 'Obec Webchat',
                        layout: {
                            type: 'hbox',
                            align: 'start'
                        },
                        items: [
                            {
                                xtype: 'button',
                                action: 'back',
                                id: 'BackButton',
                                itemId: 'BackButton',
                                margin: '5 70% 5 15',
                                ui: 'back',
                                text: 'Home'
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        docked: 'bottom',
                        height: '95%',
                        html: '<iframe src="http://webim.obec.local/" width="100%" height="100%" scrolling="yes"></iframe>',
                        itemId: 'MyContainer1',
                        width: '100%'
                    }
                ]
            }

希望这有帮助。

Answer 4

您需要在blur()

上调用textfield方法

// Assuming the id of textfield - "textFieldId"
Ext.getCmp('textFieldId').blur();

尝试forcefully模糊字段的输入焦点。

Answer 5

如果你使用html进入Sencha元素必须删除一些标签html。或者你可以在源代码中添加标签
。我希望能帮助你。：）

键盘出现时防止用户界面移动

5 个答案: