jquery - 如何覆盖 Firefox 的 element.style 并允许自动调整大小？

Question

我的网站上有几个文本区域。一个需要初始高度为 50px(大约 2-3 行高度)，另一个初始高度为 25px(单行)。两者都使用 JQuery AutoSize 在添加更多文本时增加文本区域的高度。

如果我像这样使用 CSS !important 规则:

textarea-large {
  height: 50px !important;
}
textarea-small {
  height: 25px !important;
}

然后它覆盖了 Firefox 的样式，这很棒，但是 AutoSize 停止工作。当我添加更多文本时，文本框保持相同大小，我无法阅读我输入的内容。

如何设置一个初始高度来覆盖 Firefox 的 element.style，同时允许自动调整大小并在添加更多文本时增加文本区域的高度？

Answer 1

将 height 更改为 min-height 即可。

See this fiddle.

这是该 fiddle 的 HTML 和 CSS:

<textarea class="large"></textarea>
<textarea class="small"></textarea>

textarea { margin: 1em; outline: none; text-align: justify; overflow: hidden; }
.large { min-height: 50px !important; }
.small { min-height: 25px !important; }

这是我用来让它自动调整大小的脚本:

$(function() {
    //  the following simple make the textbox "Auto-Expand" as it is typed in
    $("textarea").keyup(function(e) {
        //  the following will help the text expand as typing takes place
        while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
            $(this).height($(this).height()+1);
        };
    });
});