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