使用jquery调整文本区域的高度

resize height of textarea with jquery

本文关键字：高度 区域 文本 jquery 调整 使用      更新时间：2023-09-26

我试图复制类似fb的评论框，在那里，他们使用扩展文本区域使其优雅在文本填充时调整大小

我的观点看起来像：

<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添加到文本区域的元素样式中，然后当用户在文本区域中输入数据时，我调整文本区域的大小将不起作用。有人知道我该如何取消调整文本区域的大小吗？

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

绑定对input事件执行大小调整的函数。当您清空文本区域时，它会更新值，但事件尚未触发。强制事件的一种方法是：

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

示例：jsfiddle

try:

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

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

感谢Adriano Godoy

相关文章：