<p>textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。</p><p>例如：</p><p><textarea name="text" style="width: 300px;"></p><p>textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。</textarea></p><p>1</p><p>显示结果如下，依次是IE、谷歌、Opera和火狐</p><p><img src="/up_pic/201805/141133118936.png" title="141133118936.png" alt="1.png"/></p><p>如下是自己设定行数来进行强制显示</p><p><textarea name="text" style="width: 300px;" rows="4">textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。</textarea></p><p>1</p><p>如下是显示结果，依次是IE、谷歌、Opera和火狐</p><p><img src="/up_pic/201805/141133188319.png" title="141133188319.png" alt="2.png"/></p><p>可以看到火狐总是比其他浏览器多显示一行内容（猜测估计火狐的行数是按照01234来算的，哈哈）。</p><p>那有没有方法在初始化的时候让textarea的高度自适应呢，因为textarea是整行显示，很有可能会忽略未显示出来的内容。</p><p>我们来看下面这一张图：</p><p><img src="/up_pic/201805/141134415342.gif" title="141134415342.gif" alt="3.gif"/></p><p>其中scrollHeight代表的是一个DOM元素的全文高度，利用此我们可以来实现textarea的高度自适应，方法如下：</p><p><textarea name="text" style="width: 300px;">textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。</textarea></p><pre class="brush:js;toolbar:false"><script>
$.each($("textarea"),function(i,n){
$(n).css("height",n.scrollHeight+"px");
})
</script></pre><p>下面我们再来看一下效果，依次是IE、谷歌、Opera和火狐</p><p><img src="/up_pic/201805/141134502949.png" title="141134502949.png" alt="4.png"/></p><p>完美的实现了textarea的高度以内容的高度来显示，不会造成内容忽略。而且使用起来相当简单，只需要在其js中添加下面这段代码就全部搞定了。</p><pre class="brush:js;toolbar:false">$.each($("textarea"),function(i,n){
$(n).css("height",n.scrollHeight+"px");
})</pre>