使用jQuery自动扩展textarea

Question

使用jQuery自动扩展textarea如何使用jQuery自动扩展textarea？我有一个用于解释会议议程的文本框，所以当我的议程文本不断增加该文本框区域时，我想扩展该文本框。

Answer 1

您可以尝试在textarea中按住enter键。比较效果与其他自动扩展textarea插件....

根据评论进行编辑

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

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

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

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

更新：

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

Answer 2

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

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

如果你想要一个插件

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;
    });