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

如Danny所述，正确使用'scrollHeight'。

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

3 个答案: