Sencha Touch 1.1、PhoneGap 1.2、Android Text Area/Text Field 滚动问题答案

【问题标题】：Sencha Touch 1.1, PhoneGap 1.2, Android Text Area/Text Field scrolling issueSencha Touch 1.1、PhoneGap 1.2、Android Text Area/Text Field 滚动问题
【发布时间】：2011-12-05 18:12:25
【问题描述】：

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

我已经阅读了其他几个堆栈溢出和 sencha 论坛主题，它们描述了同一问题的变体。通常提供的解决方案是将 android:windowSoftInputMode 设置为 adjustPan 而不是 adjustResize。这确实解决了让面板向上滑动的问题，但在我的情况下是不可接受的，因为应用程序中的面板之一是聊天窗口。输入字段必须始终停靠在屏幕底部可见区域。例如，当看不到软键盘时，它应该停靠在屏幕底部，当键盘不在时，它应该停靠在软键盘上方。如果在调用 Ext.EventManager.onWindowResize 时（使用 android:windowSoftInputMode=adjustResize）将面板的大小调整到视口高度，我就能够做到这一点。问题是任何键盘输入都会导致整个面板向上滑动。一个非常老套且最终无法接受的解决方案是监听关键事件，然后通过设置面板的位置并调用 window.scrollTo(0,0) 手动将面板滑回 0,0。这确实会导致面板回到原位，但用户体验很差（每个字母输入都会使屏幕上下跳动）。

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

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

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

提前感谢您的帮助。这已经花费了 30 多个小时的时间，对于这个现在已经开发了几个月的应用来说，这几乎是一个表演障碍。

-肖恩

【问题讨论】：

您找到解决问题的方法了吗？我也遇到了.. :(
很遗憾，我还没有找到解决问题的方法。

标签： android cordova sencha-touch

【解决方案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 中弃用。具体替代方法请参考方法文档。

【讨论】：

【解决方案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);
        }
    });
}});

【讨论】：