我正在开发一个使用 Sencha Touch 2 作为用户界面的小应用程序。现在我在我的 iPad 和 iPhone 上的 Safari 中运行它。
我的问题是,每当我点击一个文本字段时,Safari 就会打开虚拟键盘并将整个网页视图向上推,离开屏幕。
这看起来不太自然,因为顶部工具栏不再可见。
这是两个演示问题的屏幕截图。在第二个屏幕截图中,您可以看到键盘可见时的效果。
有没有办法阻止这种行为,并让 Safari调整用户界面的大小?
我正在开发一个使用 Sencha Touch 2 作为用户界面的小应用程序。现在我在我的 iPad 和 iPhone 上的 Safari 中运行它。
我的问题是,每当我点击一个文本字段时,Safari 就会打开虚拟键盘并将整个网页视图向上推,离开屏幕。
这看起来不太自然,因为顶部工具栏不再可见。
这是两个演示问题的屏幕截图。在第二个屏幕截图中,您可以看到键盘可见时的效果。
有没有办法阻止这种行为,并让 Safari调整用户界面的大小?
不幸的是,Apple 想要这种行为,但有人建议使用 window.scrollTo() 进行一些小技巧:
listeners: {
focus: function() {
window.scrollTo(0,0);
}
}
将此代码放在 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);
});
}
我找到了适合我的解决方案。您将顶栏移动到容器中。
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%'
}
]
}
希望这可以帮助。
您将需要调用该blur()
方法textfield
// Assuming the id of textfield - "textFieldId"
Ext.getCmp('textFieldId').blur();
尝试
forcefully
模糊字段的输入焦点。
如果你这个使用 html 进入 Sencha 元素必须删除一些标记 html。或者您可以将标签
放在源 html 代码中。我希望能帮助你。:)