Android Webview中TextArea字段中的滚动问题答案

【问题标题】：Scrolling Issue in TextArea field in Android WebviewAndroid Webview中TextArea字段中的滚动问题
【发布时间】：2014-08-21 10:34:19
【问题描述】：

我有一个混合应用程序，它的 html 元素显示在 Android 的 web 视图中。在这些 HTML 元素中，我有一个多行文本视图。一旦我在其中输入多行，就说数字 1 到 20。我不能再滚动它了。下面是场景的解释

在上述情况下，如果我的光标位于 4 处，而 1,2,3 不可见，10,11.... 不可见，并且它们不在文本框内。我无法向上滚动。如果我点击 8 并且光标出现在 8 上。我可以向上滚动然后直到 8 但不能超过。

我在运行 OS 4.3 的三星 Galaxy Note 10.1 中遇到了这个问题。在操作系统版本 4.2.2 上运行的多个设备中进行了测试。它在那里工作得很好。

任何建议将不胜感激。这是我的 TextArea 标签：

<textarea Class="abc" role="textbox" maxlength="100" tabindex="-1" rows="6" style="overflow-x: auto; overflow-y: auto;" ></textarea>

【问题讨论】：

通过添加 -webkit-user-select: none; 解决了滚动问题但这使得 TextArea 具有可读性。我可以滚动其中的元素，但不能编辑任何内容，也不能添加新文本。现在连光标都没有了。

标签： android html css webview

【解决方案1】：

只需覆盖您的文本区域。使用下面的代码

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

【讨论】：