Question

我需要<textarea>在用户输入时垂直增长，我在网上找到了这段代码http://perplexed.co.uk/596_expanding_textarea_as_you_type.htm 我希望它写在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++
});

小提琴 http://jsfiddle.net/dcdeiv/dsL6g/3/

但是我不想使用ID或类，我希望它能用于每个textarea，所以我尝试使用每个函数：

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

但无论如何它都不起作用。

小提琴 http://jsfiddle.net/dcdeiv/BQB4M/

Answer 1

这可能不是您要找的，但请查看我的fiddle。以下代码：

$.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错误，可能会阻止你使它工作。您需要在JSFiddle中包含jQuery作为库，而textArea.attr（rows）实际上需要textArea.attr（'rows'）。请注意，即使您进行了这些更改，您的小提琴也不起作用。当你对你的行变量加/减时，什么都不会发生。

Answer 2

如果您唯一关心的是让所有textarea不依赖于classes/ids，那么在没有jquery的情况下仍然可能使用getElementsByTagName('textarea')。然后，为了实现自动扩展，我们需要将事件监听器绑定到获得的每个textarea，对原始代码进行一些更改，我们得到：

<强> HTML：

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

<强>使用Javascript：

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

FIDDLE： http://jsfiddle.net/dsL6g/6/

使用jquery自动扩展textarea

2 个答案: