用jquery调整textarea的高度

Question

我正在尝试复制 fb 之类的评论框，它们会在使用 Expanding Text Areas Made Elegant 填充文本时调整大小

我的看法是这样的：

<div class='expandingArea'>
    <pre><span></span></pre>
    <textarea id="comment_body" name="comment[body]" placeholder="In my opinion...">
    </textarea>
</div>
<input class="comment_submit" name="commit" type="submit" value="Create Comment" />

我的 jquery 是：

$( document ).ready(function() {
  $('div.expandingArea').each(function() {
    var area = $('textarea', $(this));
    var span = $('span', $(this));
    area.bind('input', function() {
      span.text(area.val());
      $(".comment_submit").css({"margin": "0.25em 0"});
      $(".expandingArea.active textarea").css({"padding": "5px", "height": "95%"});
    });
    span.text(area.val());
    $(this).addClass('active');
  });
});

随着用户填写数据，文本区域高度增加，一切正常。然后提交，他点击submit 按钮，进行ajax调用，输入的数据存储在数据库中，我重置文本区域的内容：

$('textarea').val('');

但我需要将文本区域的高度设置回它的原始高度（当用户输入文本时，它的高度随着文本填充而增加）。我不能使用类似的东西：

$('textarea').height(10);

因为这会将height = 10px 添加到 textarea 的元素样式中，然后当用户在 textarea 中输入数据时我调整 textarea 的大小将不起作用。有人知道如何撤消 textarea 的大小调整吗？

此外，如果用户在提交后在 textarea 中键入内容，则 textarea 会自行调整为正常大小。我猜这会触发 input 与 textarea 绑定。所以伪造用户输入之类的东西也可以，但我也不知道该怎么做。

Answer 1

您绑定在input 事件上调整大小的函数。当您清空 textarea 时，它会更新值，但尚未触发事件。强制事件的一种方法是：

$('textarea').val('').trigger('input');

示例：jsfiddle

Answer 2

试试：

$( document ).ready(function() {
  $('div.expandingArea').each(function() {
    var area = $('textarea', $(this));
    var span = $('span', $(this));
    area.bind('input', function() {
      span.text(area.val());
      area.attr('rows', 10);  
    });
    span.text(area.val());
    $(this).addClass('active');
  });

  $('.comment_submit').click(function() {        
     $('#comment_body').attr('rows', 2).val('');
  });
});

JSFiddle：http://jsfiddle.net/ronqt8mc/

Answer 3

$("#comment_body").css("height", "50px"); // 50px - your default size.

感谢阿德里亚诺·戈多伊