Question

如何让<textarea>调整内部内容的大小？就像facebook这样做也没有滚动条？如果有人能给我一个洞察力或如何做到这一点的链接，将不胜感激。不是真的在寻找JS答案，但如果你知道任何我不介意的解决方案。

由于

Answer 1

jQuery插件：http://james.padolsey.com/javascript/jquery-plugin-autoresize/

Answer 2

首先，<textarea>的大小在某种程度上取决于您正在运行的浏览器以及它如何在屏幕上呈现网页，因此虽然您可以使用CSS样式为浏览器提供指导，但您确实只是给浏览器一些关于应该做什么的建议。浏览器以令人高兴的方式解决问题。

其次，如果用户可以调整窗口大小，那么您将无法使<textarea>大于包含它的父级 - ，除非您以编程方式强制窗口调整大小这意味着Javascript 。

既然我们正在谈论调整内容的<textarea>大小，那么我们正在谈论某些时尚的动态内容，这意味着Javascript（或Ajax）必须在后台进行才能实现这一点 - 所以我很好奇你厌恶使用JS。

对问题的解决方案取决于对您要做的事情的更完整描述...

你能提供一些细节吗？

Answer 3

我认为这就是你所追求的......

HTML和JAVASCRIPT

<div class="statusupdate">
<textarea></textarea><button>Submit</button>
</div>
<div class="hiddentextarea"></div>
<script>
$('.statusupdate textarea').keyup(function()
{
    var statustext = $(this).val();
    $('.hiddentextarea').text(statustext);
    var height = $('.hiddentextarea').height();
    $(this).height(height);
});
</script>

CSS

.statusupdate {border-bottom:1px solid #dadada;}
.statusupdate textarea {margin: 11px 0 10px 10px;width:400px;float:left;overflow:visible;font-size:12px;height:17px;letter-spacing:0px;word-spacing:0px;font-family:arial;padding: 2px 0 2px 5px;line-height:16px;overflow:hidden;}
.hiddentextarea {width:395px;float:left;display:none;margin: 10px;border-bottom:1px solid #dadada;min-height:17px;font-size:12px;letter-spacing:0px;word-spacing:0px;font-family:arial;padding: 5px 0 5px 5px;line-height:16px;}
.statusupdate button {margin: 10px;}

textarea根据内容调整大小

3 个答案: