扩展/折叠文本区域问题

Question

我试图创建一个可扩展的文本区域，仅当该框为空时才折叠回其原始高度。 如果它不为空，那么我希望文本区域保持扩展状态并根据需要增长（即，当用户输入更多文本时增长）。 文本区域永远不要隐藏输入的文本，也就是说，它绝不能折叠到隐藏任何内容的高度。

我把到目前为止的东西摆在

http://jsfiddle.net/np5y4esr/8/

几乎是正确的，但并非完全正确。 如果您在第一个textarea输入了足够的文本以使其扩展到300像素以上的高度，请单击第二个textarea ，然后再返回第一个textarea ，第一个textarea将在您上方折叠。 我不确定自己在做什么错。

我的规则只是上面第一段中的规则。 如果有人可以创建一个新的提琴来实现此目的，或者修改我的提琴以使其正常工作，我将不胜感激。

编辑：是否可以为文本区域设置最大扩展高度？ 也就是说，它会随着用户的输入而扩展，但会停止在某个点（例如400px），就像默认的文本区域行为一样在该点滚动？

Answer 1

尝试像这样修改'focus'方法：

$('textarea.expand').focus(function () {
    if($(this).val()==="" || $(this).height() < 100) {
         $(this).animate({ height: "100px" }, 300); 
    }

});

愿它能对您有帮助。