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

Question

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

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

如果在此表格中：

我点击“Bio”的文本字段，键盘隐藏了文本字段，而不是滚动文本字段，以便在键入时显示它：

Answer 1

这绝对是一个众所周知的问题，我在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);
        }
    }
},

这对我有用。如果您需要任何帮助来实现这一点，请告诉我们！

Answer 2

较少侵入性的解决方案：

在Application启动方法上添加以下行：

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上测试）

Answer 3

“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']

Answer 4

您可以订阅键盘的显示/隐藏事件并补偿输入的偏移量。它已经在Android 4.2＆amp; 4.4（HTC One＆amp; 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);
            }
        })
    })();
}

Answer 5

对我来说效果更好

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