当我点击屏幕底部的文本字段时，键盘会出现并隐藏活动元素。在 iOS 上，它可以完美运行。
我可以滚动表单，所以文本字段在可见区域，但这一点都不好看。我做错了什么还是这是一个已知的错误，因为我在 Sencha Touch 本身的这个示例中具有相同的行为：docs.sencha.com/touch/2-1/touch-build/examples/forms/
如果在此表单上：
我点击“Bio”的文本字段，键盘隐藏了文本字段，而不是向上滚动文本字段以使其在键入时可见：
【问题讨论】：
对我来说效果更好
{
xtype: 'passwordfield',
name: 'pass',
listeners: {
focus: function (comp, e, eopts) {
var contr = this;
setTimeout(function () {
if (Ext.os.is('Android')) {
var ost = comp.element.dom.offsetTop;
contr.getParent().getParent().getScrollable().getScroller().scrollTo(0, ost, true);
}
}, 400);
}
}
}
【讨论】：
"Ext.Viewport.on('painted'"-解决方案给了我滚动问题。整个页面在方向改变后无法滚动，因为视口高度会大于窗口高度。 （方向改变后，Ext.Viewport.getHeight() 将与 Ext.Viewport.getWindowHeight() 不同。）
解决了使用覆盖输入的问题：
创建文件 app/overrides/field/Input.js
Ext.define('myApp.overrides.field.Input', {
override: 'Ext.field.Input',
initialize: function() {
var me = this;
// Solves problem that screen keyboard hides current textfield
if (Ext.os.is.Android) {
this.element.on({
scope : this,
tap : 'onTap',
});
}
me.callParent();
},
onResize: function(input) {
var me = input;
//if input is not within window
//defer so that resize is finished before scroll
if(me.element.getY() + me.element.getHeight() > window.innerHeight) {
Ext.Function.defer(function() {
me.element.dom.scrollIntoView(false);
}, 100);
}
},
// Solves problem that screen keyboard hides current textfield in e.g. MyTimeRowForm
//old solution with Viewport.on('painted', gave scroll problem when changeing orientation
onTap: function(e) {
me = this;
window.addEventListener( "resize", function resizeWindow () {
me.onResize(me);
window.removeEventListener( "resize", resizeWindow, true );
}, true );
},
});
并将其添加到 app.js
requires: ['myApp.overrides.field.Input']
【讨论】：
侵入性较小的解决方案：
在应用程序启动方法上添加以下几行：
launch: function() {
if (Ext.os.is.Android) { //maybe target more specific android versions.
Ext.Viewport.on('painted', function() {
Ext.Viewport.setHeight(window.innerHeight);
});
}
// ... rest of the launch method here
}
这在我测试过的许多情况下都很好用。 Cordova 和 Chrome 实现。对于 Cordova/Phonegap 应用程序，您只需要注意将全屏设置为 false。 （在 Cordova 3.5 上测试）
【讨论】：
您可以订阅键盘的显示/隐藏事件并补偿输入的偏移量。它已在 Android 4.2 和 4.4（HTC One 和 Nexus 7）上进行了测试。
if (Ext.os.is.Android4 && Ext.os.version.getMinor() >= 2) {
(function() {
var inputEl = null;
var onKeyboardShow = function() {
setTimeout(function() {
if (!inputEl) {
return;
}
var currentClientHeight = window.document.body.clientHeight;
var elRect = inputEl.getBoundingClientRect();
var elOffset = elRect.top + elRect.height;
if (elOffset <= currentClientHeight) {
return;
}
var offset = currentClientHeight - elOffset;
setOffset(offset);
}, 100);
};
var onKeyboardHide = function() {
setOffset(0);
};
var setOffset = function(offset) {
var el = Ext.Viewport.innerElement.dom.childNodes[0];
if (el) {
el.style.setProperty('top', offset + 'px');
}
};
document.addEventListener('deviceready', function() {
document.addEventListener("hidekeyboard", onKeyboardHide, false);
document.addEventListener("showkeyboard", onKeyboardShow, false);
}, false);
Ext.define('Ext.field.Input.override', {
override: 'Ext.field.Input',
onFocus: function(e){
inputEl = e.target;
this.callParent(arguments);
},
onBlur: function(e){
inputEl = null;
this.callParent(arguments);
}
})
})();
}
【讨论】：
这绝对是一个已知问题，我在 Android 上见过很多次。您唯一可以尝试做的就是在输入字段上侦听焦点事件，然后滚动到元素。您可能需要使用最适合您情况的正确 Y-value。
{
xtype: 'textareafield',
name: 'bio',
label: 'Bio',
maxRows: 10,
listeners: {
focus: function(comp, e, eopts) {
var ost = comp.element.dom.offsetTop;
this.getParent().getParent().getScrollable().getScroller().scrollTo(0, ost);
}
}
},
这对我有用。如果您需要任何帮助来实现此功能，请告诉我！
【讨论】：
comp.getParent().getScrollable().getScroller().scrollTo(0, e.target.clientHeight);，但它仍然无法正常工作，不幸的是......代码被调用并且在桌面Chrome中它似乎滚动了一点，在android上它没有'不...
fieldset。在我自己的 Sencha 表单示例的工作版本中，我有 this.getParent().getParent().getScrollable().getScroller().scrollTo(0, e.target.clientHeight);（这是指表单的滚动条）。如果这仍然不起作用，您能否查看 Android 中是否引发了任何 javascript 错误？
bio 字段上工作。