如何根据内容调整文本区域的大小 [英] How to resize textarea according to content

问题描述

我正以编程方式将内容添加到文本区域，如下所示(其中@ muse.text是我要在文本区域中显示的内容)

I am adding the content to a textarea programmatically as shown below (where @muse.text is the content I want to display in the textarea)

$(@el).find('.context textarea').text @muse.text
$(@el).find('.context textarea').elastic()

但是当我检查文本区域时，看不到全部内容

However when I check the textarea, not the entire content is seen

我要显示的实际内容

如何以编程方式将文本区域设置为内容的高度?

How can I programmatically set the textarea to the height of the content?

推荐答案

我在 Fiddle 中写了一些代码.这将以简单的方式帮助您
HTML

I have wriiten some code in Fiddle. This will help you in simple way
HTML

<div id="contextwrapper">
    <div class="context">
        <textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut mauris dictum massa accumsan elementum at id sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubiliaLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut mauris dictum massa accumsan elementum at id sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus id dui ac leo tincidunt sodales in sit amet leo. Etiam placerat vehicula lorem nec auctor. Aliquam luctus justo nec lacus laoreet tempus. Cras tristique sem ut lectus ornare non rutrum ipsum cursus. Vestibulum vel ipsum mi.

Mauris hendrerit, purus ut ultrices tristique, libero neque eleifend lectus, non ultrices odio nulla sed nisi. Quisque mollis posuere hendrerit. Cras lectus leo, dictum id viverra eu, interdum ac arcu. Cras eget mattis sem. In in eros magna. Nulla molestie, eros sed vulputate suscipit, nibh arcu pulvinar eros, nec placerat neque neque sed sem. Aenean nunc dui, sodales at aliquam elementum, porttitor sit amet felis. Nunc sed sapien eu quam venenatis convallis a nec ante. Donec varius nisl non neque posuere sed interdum diam tempus. Donec dui dolor, aliquet ac mattis eu, dapibus a enim. Nulla dui libero, molestie id suscipit laoreet, vehicula ut nunc. Donec eu libero urna, sit amet malesuada justo. Nulla bibendum vehicula dui, at tempor mi condimentum semper. Sed eget lorem dolor. Fusce suscipit erat quis nulla sollicitudin pellentesque.

Aliquam scelerisque mollis ante condimentum auctor. Proin laoreet pharetra egestas. Quisque lacinia ipsum in ligula tristique eget ornare leo scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed augue est, tincidunt ac lobortis placerat, imperdiet at neque. Suspendisse erat justo, elementum vel adipiscing non, mollis sit amet ligula. Sed vitae tempor nunc.

Vivamus molestie, nulla et posuere fermentum, ligula nibh suscipit orci, id interdum dui ipsum quis nisi. Vestibulum tincidunt urna quis elit semper ullamcorper. Maecenas scelerisque accumsan volutpat. Maecenas placerat accumsan vulputate. Proin rhoncus rhoncus tempor. Nulla hendrerit consectetur velit posuere commodo. Aliquam tempus malesuada sapien, nec hendrerit nibh dignissim id.

Curae; Phasellus id dui ac leo tincidunt sodales in sit amet leo. Etiam placerat vehicula lorem nec auctor. Aliquam luctus justo nec lacus laoreet tempus. Cras tristique sem ut lectus ornare non rutrum ipsum cursus. Vestibulum vel ipsum mi.

Mauris hendrerit, purus ut ultrices tristique, libero neque eleifend lectus, non ultrices odio nulla sed nisi. Quisque mollis posuere hendrerit. Cras lectus leo, dictum id viverra eu, interdum ac arcu. Cras eget mattis sem. In in eros magna. Nulla molestie, eros sed vulputate suscipit, nibh arcu pulvinar eros, nec placerat neque neque sed sem. Aenean nunc dui, sodales at aliquam elementum, porttitor sit amet felis. Nunc sed sapien eu quam venenatis convallis a nec ante. Donec varius nisl non neque posuere sed interdum diam tempus. Donec dui dolor, aliquet ac mattis eu, dapibus a enim. Nulla dui libero, molestie id suscipit laoreet, vehicula ut nunc. Donec eu libero urna, sit amet malesuada justo. Nulla bibendum vehicula dui, at tempor mi condimentum semper. Sed eget lorem dolor. Fusce suscipit erat quis nulla sollicitudin pellentesque.

Aliquam scelerisque mollis ante condimentum auctor. Proin laoreet pharetra egestas. Quisque lacinia ipsum in ligula tristique eget ornare leo scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed augue est, tincidunt ac lobortis placerat, imperdiet at neque. Suspendisse erat justo, elementum vel adipiscing non, mollis sit amet ligula. Sed vitae tempor nunc.

Vivamus molestie, nulla et posuere fermentum, ligula nibh suscipit orci, id interdum dui ipsum quis nisi. Vestibulum tincidunt urna quis elit semper ullamcorper. Maecenas scelerisque accumsan volutpat. Maecenas placerat accumsan vulputate. Proin rhoncus rhoncus tempor. Nulla hendrerit consectetur velit posuere commodo. Aliquam tempus malesuada sapien, nec hendrerit nibh dignissim id.
</textarea>
    </div>
</div>

<div id="hidden"></div>​

CSS

#contextwrapper .context textarea{
    width:150px;
    height: 150px;
}

#hidden{
    border: 1px solid red;
    display: none;
}

jQuery

var content = jQuery("#contextwrapper").find(".context textarea").val();
jQuery("#hidden").html(content);

divHeight = jQuery("#hidden").height();
divWidth = jQuery("#hidden").width();

jQuery("#contextwrapper").find(".context textarea").css({width:divWidth+'px', height:divHeight+'px'});

这篇关于如何根据内容调整文本区域的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！