CODEWITHSUNDEEP
javascriptjquerypluginsjquery-pluginstextarea
ctrlmaniac
ctrlmaniac

Reputation: 444

Autoexpanding textarea with jquery

I need the <textarea> to vertically grows as the user types in and I found this code on the net http://perplexed.co.uk/596_expanding_textarea_as_you_type.htm I want it to be written in jQuery but as I turn the code into jQuery it does not work.

This is the javascript version:

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

fiddle http://jsfiddle.net/dcdeiv/dsL6g/3/

however I don't want to use an ID or a class, I want that to work for each textarea, so I tryed to use an each function:

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

but it does not work anyway.

fiddle http://jsfiddle.net/dcdeiv/BQB4M/

Upvotes: 0

Views: 170

Answers (2)

G.Mendes
G.Mendes

Reputation: 1201

If your only concern is about getting all textarea's not depending of classes/ids, it is still possible to do without jquery by using getElementsByTagName('textarea'). Then, to achieve the autoexpanding we need to bind an event listener to each of the textarea's obtained, doing some changes to original code, we get:

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/

Upvotes: 1

ryanolsonx
ryanolsonx

Reputation: 26

This might not be what you're looking for but check out my fiddle. Code below as well:

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

Also, in your fiddle, you had a few javascript errors that could prevent you from getting it working. You need to include jQuery as a library in JSFiddle and textArea.attr( rows ) needs to actually be textArea.attr( 'rows' ). Please note that even if you make these changes, your fiddle does not work. When you inc/dec your rows variable, nothing will happen.

Upvotes: 1

Related Questions