CODEWITHSUNDEEP
jquerypluginstextarea
Jaideep Singh
Jaideep Singh

Reputation: 589

jQuery - Textarea auto grow plugin cross-browser compatible

I need a cross-browser compatible plugin for textrea to be auto growing and shrinking when the inside text is getting written or deleted.

I have tried the Elastic plugin and Padolsey autoresize ones. Both fails in Firefox 3.6.

Upvotes: 1

Views: 6054

Answers (6)

Evyatar
Evyatar

Reputation: 1

I've just wrote an angular directive for it (no jQuery dependency), Check it out: angular-autogrow directive (GitHub)

Upvotes: 0

Gaucho_9
Gaucho_9

Reputation: 265

I did it this method, in jQuery.

setInterval(function(){
      $(name_textarea).css('height', $(name_textarea)[0].scrollHeight+2+'px')
},100);

Try it, you can play with de number behind scrollHeight to obtain best results.

Upvotes: 0

Brave Dave
Brave Dave

Reputation: 1300

Here is a plugin based on above snippet, but fixes IE <= 8 issue, and also support horizontal growing of textareas.

https://github.com/dgbeck/jquery.autogrow-textarea

Upvotes: 0

notreadbyhumans
notreadbyhumans

Reputation: 617

In 1.6+ you no longer need a plugin to achieve this, simply bind a change event to this function and your textareas will expand graciously:

function form_autosize(this_element){

    //Catch the current scroll position to stop it from jumping about in some browsers

    this_scroll = $(window).scrollTop();

    //Clear any existing height settings

    $(this_element).css('height', '');

    //Set the textarea to scroll so that you can capture its height

    $(this_element).css('overflow', 'scroll');

    //Set the element height to the current scroll height

    $(this_element).height($(this_element).prop('scrollHeight'));

    //Hide the scrollbars

    $(this_element).css('overflow', 'hidden');

    //Re-apply the scroll position

    $(window).scrollTop(this_scroll);

This seems to work well in the latest versions of Chrome, Opera, Firefox, and Safari. Not tried it is Internet Explorer or older versions yet.

A suitable change event might be:

$(this_element).on('keyup change paste', function() { form_autosize(this_element) });

Upvotes: 1

Jaideep Singh
Jaideep Singh

Reputation: 589

jQuery expandable -

A jQuery plugin that auto-expands textareas to fit the contents as a user types

It is another great textarea auto growing plugin written on same line of approach as @Lashae has published, but with few extra features, like animation.

Upvotes: 2

Lashae
Lashae

Reputation: 1392

I've been using the snippet at: Autogrow script @ Javascript Bindings for the Google AppEngine Data Store Project on Google Code

Just in case the URL may be down or deleted, here goes the code:

(function($) {

/*
 * Auto-growing textareas; technique ripped from Facebook
 */
$.fn.autogrow = function(options) {

    this.filter('textarea').each(function() {

        var $this       = $(this),
            minHeight   = $this.height(),
            lineHeight  = $this.css('lineHeight');

        var shadow = $('<div></div>').css({
            position:   'absolute',
            top:        -10000,
            left:       -10000,
            width:      $(this).width() - parseInt($this.css('paddingLeft')) - parseInt($this.css('paddingRight')),
            fontSize:   $this.css('fontSize'),
            fontFamily: $this.css('fontFamily'),
            lineHeight: $this.css('lineHeight'),
            resize:     'none'
        }).appendTo(document.body);

        var update = function() {

            var times = function(string, number) {
                for (var i = 0, r = ''; i < number; i ++) r += string;
                return r;
            };

            var val = this.value.replace(/</g, '&lt;')
                                .replace(/>/g, '&gt;')
                                .replace(/&/g, '&amp;')
                                .replace(/\n$/, '<br/>&nbsp;')
                                .replace(/\n/g, '<br/>')
                                .replace(/ {2,}/g, function(space) { return times('&nbsp;', space.length -1) + ' ' });

            shadow.html(val);
            $(this).css('height', Math.max(shadow.height() + 20, minHeight));

        }

        $(this).change(update).keyup(update).keydown(update);

        update.apply(this);

    });

    return this;

} })(jQuery);

And to use, just invoke it on the textareas you would like to auto-grow.

Example:

$('textarea').autogrow();

Upvotes: 6

Related Questions