Javascript 行为上的奇怪变化-<；textarea>；在Windows 8.1中

我们的应用程序是针对Windows 8的HTML5/WinJS Google Talk应用程序。我们有一个用于聊天输入的文本区域。我们为它设置了一个最大高度，并通过编程将高度设置为最大值

因此，在达到该最大值后，它将overflowY设置为滚动。这一直很有效。然而，当我们在Windows8.1上测试我们的应用程序时，它有一个问题。每当我们在输入上键入

时，键入的每个字符的高度都会增加3倍。所以当你打字的时候，这个盒子会越来越大，即使它只有5个字母，而且不需要换行。由于某些原因，滚动高度或高度未正确更新


这是绑定到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”，因为出于某种原因，卷轴的高度似乎总是比原来大5倍。这是我们的黑客解决方案。在8.1中，它似乎要高出8px。但是（在8.1中）当我们清除文本字段（Ctrl-A然后点击Backspace）时，它不会重置文本区域的高度，但在Windows8中确实如此

我认为我们在JavaScript方面的做法是错误的，完全可以接受建议

如果我能提供更多信息，请告诉我
 我注意到，Windows8的javascript会导致css之间的大量冲突。我正在开发一个应用程序，其中一半的时间我只是试图修复由冲突的css或全局变量引起的视觉错误。您是否使用各种css文件并在它们之间声明相似的名称？（如中所示，假设您在其中声明了file1.css和.inputField，在本页中，您使用不同的atributes声明了file2.css和.inputField）
而不是使用Javascript代码，我将创建一个添加溢出滚动的类

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

代码应该更容易一眼就能理解

e、 g

希望这能解决你的问题。哦，移除高度并将其更改为
min height:30px
我自己做了一些测试。不幸的是，我没有Win8.1，我只有Win8

所以我在chrome和IE10的Win8上进行了测试，结果一切都很奇怪！无论如何，如果我设置
e.target.style.height=（e.target.scrollHeight-18）+“px”接近
字体大小
，它开始表现得更合理

现在它可以在chrome、firefox和IE10（Win8）中运行

这里是JSFIDLE，所有人都可以查看它：

因此，您可以在Win8.1中查看它，也许它对您来说足够好，可以保留它
 我改进了Windkiller的小提琴

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

在最后一个字符长度大于当前字符长度的事件（即“输入”）中，高度被指定为初始高度的大小，然后被指定为scrollHeight的值

我在这个样本中也使用了“他们”单元

此外，我在css样式中添加（声明）了一个线条高度，并特别声明了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>

jsiddle:
.inputField
仅在此css文件中声明。不过，我认为我们目前的解决方案非常易变。我确实发现有一种类似“克隆”的方法，你有一个隐藏的div，你取它的值，在div中设置它，然后取div的高度，然后将div的高度设置为这个值。看起来有点粗糙，但是：/尝试先删除高度，然后选择最小高度
if ($('textarea').height => 350) { $('textarea').addClass('overflowY');}

<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>

$('#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'));

});

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