使用jQuery自动扩展textarea

Question

如何使用jQuery自动扩展textarea？

我有一个用于解释会议议程的文本框,所以当我的议程文本不断增加该文本框区域时,我想扩展该文本框.

Answer 1

如果你不想要一个插件,那就有一个非常简单的解决方案

$("textarea").keyup(function(e) {
    while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
        $(this).height($(this).height()+1);
    };
});

看到它在一个jsFiddle工作我曾经在这里回答另一个textarea问题.

要回答这样做的问题,或者在文本删除时将其缩小:jsFiddle

如果你想要一个插件

@Jason 在这里设计了一个

Answer 2

我尝试了很多, 这个很棒. ^{链接已经死了.这里有更新的版本.请参阅下面的旧版本.}
您可以尝试在textarea中按住enter键.比较效果与其他自动扩展textarea插件....

根据评论进行编辑

$(function() {
   $('#txtMeetingAgenda').autogrow();
});

注意:你应该包含所需的js文件......

为了防止在textarea的滚动条从闪烁和关闭过程中膨胀/收缩,可以设置overflow到hidden还有:

$('#textMeetingAgenda').css('overflow', 'hidden').autogrow()

更新:

上面的链接已被破坏.但你仍然可以在这里获取javascript文件.

Answer 3

生长/收缩textarea.这个演示使用jQuery进行事件绑定,但它不是必须的.
(没有IE支持 - IE不响应行属性更改)

演示页面

HTML

<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>

CSS

textarea{  
  display:block;
  box-sizing: padding-box;
  overflow:hidden;

  padding:10px;
  width:250px;
  font-size:14px;
  margin:50px auto;
  border-radius:8px;
  border:6px solid #556677;
}

javascript(更新)

$(document)
    .one('focus.textarea', '.autoExpand', function(){
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.textarea', '.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0,
            rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });

Answer 4

• 汽车种植Textareas
• jQuery Autosize

Answer 5

你可以尝试这个

$('#content').on('change keyup keydown paste cut', 'textarea', function () {
        $(this).height(0).height(this.scrollHeight);
    }).find('textarea').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
  <textarea>How about it</textarea><br />
  <textarea rows="5">111111
222222
333333
444444
555555
666666</textarea>
</div>

Answer 6

感谢SpYk3HH,我开始使用他的解决方案并将其转换为此解决方案,这增加了缩小的功能,甚至更简单,更快,我猜想.

$("textarea").keyup(function(e) {
    $(this).height(30);
    $(this).height(this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")));
});

在当前的Chrome,Firefox和Android 2.3.3浏览器中进行了测试.

您可能会在某些浏览器中看到滚动条的闪烁.添加此CSS来解决这个问题.

textarea{ overflow:hidden; }

Answer 7

要定义可自动扩展的textarea,您必须做两件事:

1. 单击其中的Enter键后展开它,或键入内容多行.
2. 而收缩在模糊它来获得实际大小,如果用户输入空格.(奖金)

这是一个完成任务的手工功能.

几乎所有浏览器都能正常工作(<IE7).这是方法:

    //Here is an event to get TextArea expand when you press Enter Key in it.
    // intiate a keypress event
    $('textarea').keypress(function (e) {  
       if(e.which == 13)   {   
       var control = e.target;                     
       var controlHeight = $(control).height();          
      //add some height to existing height of control, I chose 17 as my line-height was 17 for the control    
    $(control).height(controlHeight+17);  
    }
    }); 

$('textarea').blur(function (e) {         
    var textLines = $(this).val().trim().split(/\r*\n/).length;      
    $(this).val($(this).val().trim()).height(textLines*17);
    });

这里是一个关于这个职位.

Answer 8

我之前使用过Textarea Expander jQuery插件,结果很好.