Question

我想更改textAreaSize：当我点击文本区域时，我必须显示所有文本。当我离开它时，高度必须返回其默认值。

静态地说，我确实喜欢这样：

function resizeMyTextArea(){
$('#myTextArea').css("height",120);
}

有时我需要超过120来显示所有文本，我该如何动态地执行此操作。

Answer 1

考虑使用以下jQuery插件

http://www.jacklmoore.com/autosize/

$(document).ready(function(){
    $('textarea').autosize();   
});

您可以在textarea上为blur事件编写其他代码，将文本区域大小恢复为默认值。基于文档而不是可以使用（请测试系统中的代码，我还没有在我的系统中尝试过这个，但我相信它会起作用）：

$('textarea.example').on('focus', function(){
    $(this).autosize();
});

$('textarea.example').on('blur', function(){
    $(this).trigger('autosize.destroy');

});

Answer 2

有一种非常简单的方法可以实现这一点：你必须将textarea内容添加到一个div，它偏离你的页面（通过CSS）。然后你得到div的高度并将它应用到你的textarea。重要的是，将textarea的换行符替换为<br>标记，您可以使用简单的replace（）来实现，这里是代码：

$('#myTextArea').on('click', function(){
    orig_h=$(this).height()
    html=$('#myTextArea').val().replace(/\r\n|\r|\n/g,"<br />");
    $('#myoffthepageTextArea').html(html);
    h=$('#myoffthepageTextArea').height()
    $('#myTextArea').height(h)
}).on('blur', function(){
    $('#myTextArea').height(orig_h)    
});

这里是小提琴：http://jsfiddle.net/K4qEA/2/

Answer 3

我确实喜欢这样：

jQuery(document).ready(function(){
    var orig_h;
    jQuery("#myTextArea").on("focus", function(){
       orig_h=jQuery(this).height();
       jQuery(this).height( jQuery(this)[0].scrollHeight );
    }).on('blur', function(){
        jQuery('#myTextArea').height(orig_h)    
    });
});

Jquery，更改textArea大小

3 个答案: