展开/折叠文本区域问题

Question

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

我把我目前拥有的东西放在了

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

这几乎是正确的，但并不完全正确。如果您在第一个 textarea 中输入足够多的文本，使其扩展超过 300 像素的高度，然后单击第二个 textarea，然后返回第一个，第一个将折叠在您身上。我不确定我做错了什么。

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

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

Answer 1

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

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

});

希望对你有帮助。