javascript - 如何根据内容调整文本区域的大小

Question

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

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

但是，当我检查 textarea 时，并没有看到全部内容

我要显示的实际内容

如何以编程方式将 textarea 设置为内容的高度？

Answer 1

你做过谷歌搜索吗？

首先我发现这是http://www.jacklmoore.com/autosize，这正是你想要的。

Answer 2

我在Fiddle写了一些代码。这将以简单的方式帮助您
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 ​</p>

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