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

Posted 2023-02-26

【中文标题】键盘出现时防止用户界面移动

【英文标题】：Prevent movement of user interface when keyboard appears

【发布时间】：2012-05-16 13:20:36

【问题描述】：

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

我的问题是，每当我点击文本字段时，Safari 都会打开虚拟键盘并将整个网页视图向上推，离开屏幕。

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

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

有没有办法阻止这种行为，并让 Safari 调整用户界面？

---

【问题讨论】：

你解决了吗？

@AdilMalik：不，很遗憾没有

关于这个愚蠢问题的任何更新？？？？有什么解决办法吗？

【参考方案1】：

不幸的是，Apple 想要这种行为，但 someone 建议使用 window.scrollTo() 进行一些小技巧：

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

【讨论】：

感谢您的回答！它仍然不完美，因为用户可以看到之后立即固定的初始运动。除此之外它工作正常。

【参考方案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);
        );
    

【参考方案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/"   scrolling="yes"></iframe>',
                        itemId: 'MyContainer1',
                        width: '100%'
                    
                ]
            

希望这会有所帮助。

【参考方案4】：

您需要在textfield 上调用blur() 方法

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

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

【讨论】：

这不是隐藏键盘吗，因为文本字段失去了焦点？关键是我实际上希望键盘在那里，但没有一半的用户界面被推离屏幕。

你想达到什么目的？一半键盘 + 休息一半你的应用程序......？

看两张截图。在下方的屏幕截图中，您可以看到键盘将整个用户界面向上推。顶部工具栏不见了。我想在不将 UI 推出屏幕顶部的情况下显示键盘。相反，它应该调整大小。

【参考方案5】：

如果你这个使用 html 进入 Sencha 元素必须删除一些标记 html。或者您可以将标签 放在源 html 代码中。我希望能帮助你。 :)

【讨论】：

对不起，我不确定你的意思。

你能写点代码吗？我说错在哪里。谢谢