Javascript 使用jquery自动扩展textarea

我需要

随着用户的输入而垂直增长，我在网上找到了这段代码 我希望它是用

jQuery

编写的，但是当我将代码转换成

jQuery

时，它就不起作用了

这是javascript版本：

<textarea id="text"></textarea>

var textArea = document.getElementById('text')
textArea.addEventListener('input', function () {
    while (
    textArea.rows > 1 && textArea.scrollHeight < textArea.offsetHeight) {
        textArea.rows--;
    }
    var h = 0;
    while (textArea.scrollHeight > textArea.offsetHeight && h !== textArea.offsetHeight) {
        h = textArea.offsetHeight;
        textArea.rows++;
    }
    textArea.rows++
});

var textArea=document.getElementById（'text'）
textArea.addEventListener（'input'，function（）{
当(
textArea.rows>1&&textArea.scrollHeighttextArea.offsetHeight&&h！==textArea.offsetHeight）{
h=文本区域。偏离视线；
textArea.rows++；
}
textArea.rows++
});

小提琴

但是，我不想使用ID或类，我希望它适用于每个文本区域，因此我尝试使用each函数：

<textarea></textarea>

$.fn.growRows = function() {
    return this.each(function() {
        var textArea     = $( this ),
            scrollHeight = textArea.scrollTop(),
            offsetHeight = textArea.height(),
            rows         = textArea.attr( rows ),
            h            = 0;

        textArea.keyup(function() {

            while ( rows > 1 && scrollHeight < offsetHeight ) {
                rows--;
            }

            while ( scrollHeight > offsetHeight && h !== offsetHeight ) {
                h = offsetHeight;
                rows++;
            }
            rows++;
        });
    });
}

$( 'textarea' ).growRows();

$.fn.growRows=函数（）{
返回此值。每个（函数（）{
var textArea=$（此），
scrollHeight=textArea.scrollTop（），
offsetHeight=textArea.height（），
行=textArea.attr（行），
h=0；
textArea.keyup（函数（）{
while（行数>1&&scrollHeightoffsetHeight&&h！==offsetHeight）{
h=视线外；
行++；
}
行++；
});
});
}
$（'textarea'）.growRows（）；

但它无论如何都不起作用

---

小提琴

这可能不是您想要的，但请查看我的。代码如下：

$.fn.growRows = function() {
    return this.each(function() {
        var textArea = $(this);

        textArea.on('keyup', function() {
            textArea[0].rows = textArea.val().split('\n').length || 1;
        });

        textArea.trigger('keyup'); //set initial size
    });
};

$('textarea').growRows();

---

此外，在你的小提琴，你有一些javascript错误，可能会阻止你让它工作。您需要将jQuery作为库包含在JSFIDLE和textArea中。attr（rows）实际上需要是textArea.attr（'rows'）。请注意，即使您进行了这些更改，您的小提琴也无法工作。当您inc/dec您的rows变量时，将不会发生任何事情。

如果您唯一关心的是获取所有

textarea

，而不是

类/id

，那么使用

getElementsByTagName（'textarea'）

仍然可以不使用

jquery

。然后，为了实现自动扩展，我们需要将事件侦听器绑定到获得的每个

文本区域

，对原始代码进行一些更改，我们得到：

HTML:

<textarea></textarea>
<textarea></textarea>

var textArea = document.getElementsByTagName('textarea'); //get all textareas
for (var i = 0; i <= textArea.length-1; i++) {            //loop through textareas
  textArea[i].addEventListener('input', function () {     //binds listener 
    while (
    this.rows > 1 && this.scrollHeight < this.offsetHeight) {
        this.rows--;
    }

    var h = 0;
    while (this.scrollHeight > this.offsetHeight && h !== this.offsetHeight) {
        h = this.offsetHeight;
        this.rows++;
    }

    this.rows++
  });
}

Javascript:

<textarea></textarea>
<textarea></textarea>

var textArea = document.getElementsByTagName('textarea'); //get all textareas
for (var i = 0; i <= textArea.length-1; i++) {            //loop through textareas
  textArea[i].addEventListener('input', function () {     //binds listener 
    while (
    this.rows > 1 && this.scrollHeight < this.offsetHeight) {
        this.rows--;
    }

    var h = 0;
    while (this.scrollHeight > this.offsetHeight && h !== this.offsetHeight) {
        h = this.offsetHeight;
        this.rows++;
    }

    this.rows++
  });
}

var textArea=document.getElementsByTagName（'textArea'）//获取所有文本区域
对于（变量i=0；i 1&&this.scrollHeightthis.offsetHeight&&h！==this.offsetHeight）{
h=这是一个偏视；
这个.rows++；
}
这是一排++
});
}

---

小提琴：

它非常简单，而且只有几行，所以它正是我想要的！非常感谢。