android - 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

侵入性较小的解决方案：

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

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 和 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);
            }
        })
    })();
}

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