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

尝试：

$( 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 2

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

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

示例：jsfiddle

Answer 3

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

感谢Adriano Godoy

用jquery调整textarea的高度

3 个答案: