反正有没有基于页面加载内容的textarea"autofit"高度？

Question

无论如何通过CSS或Javascript根据内容设置textarea的高度？我的CSS中有一个硬编码的高度,但我想要它默认,所以页面加载时没有垂直滚动条？

Answer 1

http://www.jacklmoore.com/autosize/如何将自动调整大小删除到任何网页,它应该只是工作.如果您对它的工作原理感到好奇,那么来源很短并且评论很好.

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

资料来源:https://github.com/jackmoore/autosize

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

Answer 2

您可以使用jQuery UI Autoresize使用auto resize插件

这是html,

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
 src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://css-tricks.com/examples/TextareaTricks/js/autoresize.jquery.min.js"></script>
<textarea></textarea>

这是jquery,

$('textarea').autoResize();

见DEMO

Answer 3

没有插件你可以做类似的事情

$(document).ready(function(){
  elem=document.getElementById('#elemid');
  while(elem.clientHeight < elem.scrollHeight) {elem.height(elem.height()+10)}
});

在具有滚动条的情况下调整textarea的大小(所以elem.clientHeight <elem.scrollHeight).即使没有JQuery,你也可以在普通的javascript中轻松完成.

没有测试代码,它只是"概念".

编辑:愚蠢我,它更容易,没有循环......

if (elem.clientHeight < elem.scrollHeight) elem.style.height=elem.scrollHeight+"px";