Sencha Touch 2.1：表单面板键盘隐藏Android上的活动文本字段

当我点击屏幕底部的文本字段时，键盘会出现并隐藏活动元素。在iOS上，它工作得非常完美

我可以滚动表单，因此文本字段位于可见区域，但这一点都不好。我是否做错了什么，或者这是一个已知的bug，因为我在Sencha Touch自身的示例中有相同的行为：docs.Sencha.com/Touch/2-1/Touch-build/examples/forms/

如果在本表格上：

我点击“Bio”的文本字段，键盘会隐藏文本字段，而不是在键入时向上滚动文本字段使其可见：

---

这是一个众所周知的问题，我在Android上已经见过很多次了。您可以尝试做的唯一一件事是侦听输入字段上的焦点事件，然后滚动到元素。您可能需要使用正确的

Y

-值，这最适合您的情况

{
    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);
        }
    }
},

这对我有用。如果你需要任何帮助来实现这一点，让我知道

---

您可以订阅显示/隐藏键盘事件，并补偿输入的偏移量。它已经在安卓4.2和4.4（HTC One和Nexus 7）上进行了测试

if（Ext.os.is.Android4&&Ext.os.version.getMinor（）>=2）{
（功能（）{
var-inputEl=null；
var onKeyboardShow=函数（）{
setTimeout（函数（）{
如果（！inputEl）{
返回；
}
var currentClientHeight=window.document.body.clientHeight；
var elRect=inputEl.getBoundingClientRect（）；
var elOffset=elRect.top+elRect.height；
如果（elOffset侵入性较小的溶液：

在应用程序启动方法上添加以下行：

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上测试）
Ext.Viewport.on（'painted'）-解决方案给了我滚动的问题。整个页面在方向改变后无法滚动，因为视口高度将大于窗口高度。
（方向更改后，Ext.Viewport.getHeight（）将与Ext.Viewport.getWindowHeight（）不同。）

使用overidden输入解决了以下问题：

创建文件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']

它对我更有效

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

一个屏幕截图可能有助于了解更多它是在你第二次点击它之后还是每次都会发生？我将它改为
comp.getParent（）.getScrollable（）.getScroller（）.scrollTo（0，e.target.clientHeight）；
，但它仍然不起作用，不幸的是…在桌面chrome中调用了该代码，它似乎有点滚动，在android上它不起作用…好吧，这可能不起作用，因为您将针对
字段集
。在我自己的Sencha表单示例工作版本中，我有
this.getParent（）.getParent（）.getScrollable（）.getScroller（）.scrollTo（0，e.target.clientHeight）；
（这是指表单的滚动条）。如果这仍然不起作用，你能看到Android中是否抛出任何javascript错误吗？我刚刚添加了一个演示，在那里你可以看到我的示例在
bio
字段上工作。在你的示例中，我的Android仍然不走运…当点击bio字段时，我的键盘隐藏了该字段仍然不走运，不幸的是…请查看我的视频：（~10MB）谢谢。这对我来说是成功的！：-）哇，在尝试了很多东西后，这很有效。非常感谢。
{
   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);
      }
   }
}