Autogrow Textarea for Jeditable

Blog Projects
javascript jeditable jquery
HEADS UP! This article was written in 2008. Information provided might not be valid anymore and should be taken with a grain of salt.

Previously i showed you how to create inline timepicker for Jeditable. This time we will create autogrowing textarea. This custom input will adjust its height while you type. Code uses excellent Autogrow jQuery plugin by Chrys Bader. If this is your first encounter with Jeditable custom inputs you might want to read an introduction to them.

If you are just looking for the code download it here.

Creating custom input

Throughout the tutorial we will be using following code to trigger Jeditable.

$(".edit").editable("http://www.example.com/save.php", {
    type      : "autogrow",
    submit    : 'OK',
    cancel    : 'Cancel',
    tooltip   : "Click to edit.",
    onblur    : "ignore",
    autogrow : {
        lineHeight : 16,
        maxHeight  : 512
    }
});

We start by adding custom input type called autogrow.

$.editable.addInputType('autogrow', {
});

At the moment code does not do much anything. Since no methods are defined plugin will call the default methods. It creates hidden input and submit button.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Add textarea element

Next we add the basic textarea element. This code is copied from the original textarea input. Initial size is set using rows and columns or pixel height and width. Nothing exiting here yet.

$.editable.addInputType('autogrow', {
    element : function(settings, original) {
        var textarea = $('<textarea>');
        if (settings.rows) {
            textarea.attr('rows', settings.rows);
        } else {
            textarea.height(settings.height);
        }
        if (settings.cols) {
            textarea.attr('cols', settings.cols);
        } else {
            textarea.width(settings.width);
        }
        $(this).append(textarea);
        return(textarea);
    }
});

Click text below to see how it works. Basic textarea is now created. Write lot of text and scrollbar appears.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Make it grow!

To make our textarea grow we attach Chrys’s Autogrow plugin to it. Note how we pass settings to it. Check Autogrow source to see all available options.

What does $(‘textarea’, this) selector do? Inside all addInputType() functions variable this refers to Jeditable form. In plain english selector means “textarea inside Jeditable form”.

$.editable.addInputType('autogrow', {
    element : function(settings, original) {
        ...
    },
    plugin : function(settings, original) {
        $('textarea', this).autogrow(settings.autogrow);
    }
});

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Thats it! Finished code is available for download. Do you have any custom input wishes? Have you coded one yourself? Leave a comment and let me know. For inspiration check custom inputs demo.



When asking a question please include an URL to example page where the problem occurs. If you have longer code examples please use pastie.org.
CATEGORIES
Built using the awesome Flat UI Pro framework by Designmodo.

© 2013 Mika Tuupola.