Question

我花了很多时间研究这个问题，并花了更多的时间来解决它。我希望那里有人知道一个很好的解决方案。问题涉及Sencha Touch 1.1，PhoneGap 1.2和Android。我进入项目的几个月时遇到了一个问题，当文本区域或文本字段获得焦点时以及当输入具有焦点时接收到软键盘输入时，面板向上滑动。

我已经阅读了其他几个堆栈溢出和sencha论坛帖子，它们描述了同一问题的变体。提供的常用解决方案是将android：windowSoftInputMode设置为adjustPan而不是adjustResize。这确实摆脱了面板向上滑动但在我的情况下不可接受的问题，因为应用程序中的一个面板是聊天窗口。输入字段必须始终与屏幕底部可见区域对接。例如，当没有可见的软键盘时，它应该停靠在屏幕的底部，当键盘输出时，它应该保持停靠在软键盘的正上方。如果我在调用Ext.EventManager.onWindowResize时调整面板大小到视口高度（使用android：windowSoftInputMode = adjustResize），我可以完成此操作。问题是任何键盘输入都会导致整个面板向上滑动。一个非常hacky且最终不可接受的解决方案是监听关键事件，然后通过设置它的位置并调用window.scrollTo（0,0）手动将面板滑回到0,0。这确实会导致面板重新回到原位，但用户体验不佳（每次输入字母时屏幕都会反弹）。

使用android：windowSoftInputMode = adjustPan不会导致任何面板移动但不提供获取软键盘高度的任何方法，这样我就可以将聊天的输入字段正确定位在软键盘的正上方（无论如何我都不知道））。

问题1：有没有办法以编程方式确定软键盘的高度而不使用android：windowSoftInputMode = adjustResize并侦听Ext.EventManager.onWindowResize事件来读取调整大小的视口的大小？

问题2：有没有办法使用android：windowSoftInputMode = adjustResize并阻止浏览器在文本字段或文本区域获得焦点时向上滑动？

提前感谢您的帮助。这已经消耗了30多个小时的时间，并且几乎是这个应用程序的显示阻止，现在已经开发了几个月。

-Sean

Answer 1

我一直在使用Sencha Touch 1.1和PhoneGap 1.2遇到同样的问题;我有一个卡片布局，工具栏停靠在顶部和底部，底部工具栏包含一个文本字段，该文本字段应该停靠在视口底部，而不会被软键盘覆盖，即iOS消息应用程序。

我认为（他试探性地说）设置android:windowSoftInputMode=adjustResize并添加一个onWindowResize事件处理程序来手动执行组件调整大小应该解决问题：

if (Ext.is.Android) {
  Ext.EventManager.onWindowResize(function() {
    Ext.Viewport.scrollToTop();
    Ext.Viewport.updateBodySize();
    Ext.Viewport.fireEvent('resize', Ext.Viewport, Ext.getBody().getSize());
    myapp.views.viewport.getActiveItem().fireEvent('resize');
  });
}

…getActiveItem().fireEvent('resize')只调用当前卡中的resize侦听器，其中有一些手动重新绘制底部工具栏。

希望这有帮助。

编辑：“Ext.EventManager” - 在Sencha Touch 2.0.0中不推荐使用此对象。有关具体的替代方案，请参阅方法文档。

Answer 2

Ext.define('MyApp.util.TextArea', {
override: 'Ext.form.TextArea',
adjustHeight: Ext.Function.createBuffered(function (textarea) {
    var textAreaEl = textarea.getComponent().input;
    if (textAreaEl) {
        textAreaEl.dom.style.height = 'auto';
        textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px";
    }
}, 200, this),

constructor: function () {
    this.callParent(arguments);
    this.on({
        scope: this,
        keyup: function (textarea) {
            textarea.adjustHeight(textarea);
        },
        change: function (textarea, newValue) {
            textarea.adjustHeight(textarea);
        }
    });
}});

Sencha Touch 1.1，PhoneGap 1.2，Android文本区域/文本字段滚动问题

2 个答案: