Question

我的网站上有几个textareas。一个需要是50px的初始高度（大约2-3行高），另一个需要25px的初始高度（单行）。随着更多文本的添加，两者都使用JQuery AutoSize来增加textareas的高度。

如果我使用这样的CSS！重要规则：

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

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

如何设置覆盖Firefox的element.style的初始高度，但是当添加更多文本时，还允许autosize工作并增加textarea的高度？

Answer 1

将height更改为min-height即可。

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

如何覆盖Firefox的element.style但也允许自动调整大小？

1 个答案: