奇怪的行为变化 - Windows 8.1 中的 <textarea>

Question

我们的应用程序是适用于 Windows 8 的 HTML5/WinJS Google Talk 应用程序。我们有一个用于聊天输入的文本区域。我们有一个最大高度，我们以编程方式将高度设置为最大。

所以在达到最大值后，它会将 overflowY 设置为滚动。这一直很好。但是，当我们在 Windows 8.1 上测试我们的应用程序时，它出现了问题。每当我们输入oninput 时，每输入一个字符，高度就会增加 3px。因此，当您键入时，框会不断变大，即使它只有 5 个字母并且不需要换行。由于某种原因，scrollHeight 或高度没有正确更新。

<textarea class="inputField" id="inputField" placeholder="Type your message"></textarea>

onMessageInput: function (e) {
        e.target.style.height = (e.target.scrollHeight - 5) + "px";
        if (e.target.clientHeight >= 350) {
            e.target.style.overflowY = "scroll";
        }
        else {
            e.target.style.overflowY = "hidden";
        }
  }.bind(this)

即绑定到oninput的函数。我们说如果客户端高度超过 350px，则设置为滚动。

  .inputField {
            -ms-grid-row: 2;
            -ms-grid-column: 2;
            font-size: 19px;
            height: 30px;
            min-height: 30px;
            max-height: 350px;
            overflow: hidden;
        }

我们做了“- 5”，因为出于某种原因，scrollHeight 似乎总是大 5px。这是我们对此的 hacky 解决方案。它似乎在 8.1 中高出 8px。但是（在 8.1 中）当我们清除文本字段时（Ctrl-A 然后按 Backspace），它不会重置文本区域的高度，但在 Windows 8 中会这样做。

我认为我们在 JavaScript 方面的做法是错误的，并且完全愿意接受建议。

如果我能提供更多信息，请告诉我！

Answer 1

我注意到 Windows 8 的 javascript 可能会导致 css 之间的大量冲突。我正在开发一个应用程序，其中一半时间我只是尝试修复由冲突的 css 或全局变量引起的视觉错误。您是否使用各种 css 文件并在它们之间声明相似的名称？ （例如，假设您在其中声明了带有 .inputField 的 file1.css，而在此页面中您有声明了具有不同属性的 file2.css 和.inputField）

Answer 2

我自己做了一些测试。可惜我没有Win8.1，我只有Win8。

所以我在 chrome 和 Win8 上的 IE10 中对此进行了测试，一切都很奇怪！无论如何，如果我将e.target.style.height = (e.target.scrollHeight - 18) + "px"; 设置为更接近font-size，它开始表现得更合理。

现在它以某种方式在 chrome、firefox 和 IE10 (Win8) 中运行。

这里是 jsfiddle，大家可以看看：http://jsfiddle.net/GREM9/7/

所以你可以在 Win8.1 中查看它，也许它对你有好处，足以保留它。

Answer 3

我改进了 Windkiller 的小提琴。

我包含了一个调试器 div，它演示了使用选定元素的数据属性来存储和检索数据而不影响 DOM。

如果最后一个字符长度大于当前字符长度（即“输入”），则将高度分配为初始高度的大小，然后分配滚动高度的值。

我也选择了这个示例中的“em”单元。

此外，我在 css 样式中添加（声明）了一个 line-height，并专门声明了 overflow-x。

HTML

<textarea class="inputField" style="height:2em;font-size: 19px;" id="inputField" placeholder="Type your message"></textarea>
<div id='debugger'>
    <div>0 current characters</div>
    <div>0 last characters</div>
</div>

jQuery

$('#inputField').data('lastCharCount', 0);

$('#inputField').bind('input', function (e) {
    $(this).data('CharCount', e.target.value.length);

    $('#debugger').html('<div>' + $(this).data('CharCount') + ' current character(s)</div>');

    if (e.target.clientHeight >= 350 && e.target.style.overflowY != "scroll") {
        e.target.style.overflowY = "scroll";
    } else if (e.target.clientHeight < 350) {
        e.target.style.overflowY = "hidden";
    }
    if ($(this).data('CharCount') > $(this).data('lastCharCount')) {
        e.target.style.height = ((e.target.scrollHeight) / e.target.style.fontSize.replace('px', '')) + "em";
        /* A change in character length occurred */
    } else if ($(this).data('CharCount') < $(this).data('lastCharCount')) {
        e.target.style.height = '2em';
        e.target.style.height = ((e.target.scrollHeight + 1) / e.target.style.fontSize.replace('px', '')) + "em";
        /* A change in character length occurred */
    } else {
        /* No change in character length occurred. Possible character replaced */
    }
    $('#debugger').append('<div>' + $(this).data('lastCharCount') + ' last character(s)</div>');
    $(this).data('lastCharCount', $(this).data('CharCount'));

});

CSS

body {
    font-size:14px;
}
.inputField {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    min-height: 2em;
    max-height: 350px;
    overflow: hidden;
    overflow-x:hidden;
    padding:0em;
    line-height:1em;
}

jsFiddle：http://jsfiddle.net/GREM9/8/

Answer 4

我将创建一个添加溢出滚动的类，而不是使用您的 Javascript 代码。

然后使用jquery检查文本区域的高度，当达到最大高度时添加类使文本区域溢出滚动。

乍一看，代码应该更容易理解。

例如

if ($('textarea').height => 350) { $('textarea').addClass('overflowY');}

希望能解决您的问题。哦，删除高度并将其更改为min-height:30px;