jquery - 简单的 jQuery textarea 在加载时不会扩展

Question

下面是一个用 jQuery 编写的简单 textarea 脚本，它扩展每个 textarea 以适应用户键入的内容。

$(document).ready(function() {
    $('textarea').keyup(function() {
       var addin = 0;
       var txtheight = $(this).scrollTop();
       if(txtheight > 0){ addin = 4; }
       $(this).height(($(this).height() + txtheight + addin));
    });
    $('textarea').keyup();
});

问题是，如果 textarea 的初始内容大于一行，则 textarea 不会扩展以适应加载时的内容，因为无法计算滚动位置。

任何想法如何解决这个问题。

Answer 1

你为什么不试试这个插件？

http://www.jacklmoore.com/autosize

Answer 2

您可以尝试以下方法

$(document).ready(function() {
    $('textarea').each(function() {
       var addin = 0;
       var txtheight = $(this).prop("scrollHeight") -  $(this).height();
       if(txtheight > 0){ addin = 4; }
       $(this).height(($(this).height() + txtheight + addin));
    });
    $('textarea').keyup(function() {
       var addin = 0;
       var txtheight = $(this).scrollTop();
       if(txtheight > 0){ addin = 4; }
       $(this).height(($(this).height() + txtheight + addin));
    });
    $('textarea').keyup();
});​

但是，看起来低于 IE8 的任何东西都不支持滚动高度。

Answer 3

$('textarea').each(function() {
        $(this).height($(this).prop('scrollHeight'));
    });
    $('textarea').keyup(function() {
       var addin = 0;
       var txtheight = $(this).scrollTop();
       if(txtheight > 0){ addin = 4; }
       $(this).height(($(this).height() + txtheight + addin));
    });

正确使用'scrollHeight'丹尼概述的。