How to Build an Auto-Expanding Textarea jQuery Plugin, Part 2

Auto-Expanding TextareaIn part 1 we discovered how an auto-expanding textarea could be built and collated the requirements. Before we concern ourselves with the actual JavaScript, we should determine how our code will be used in a web page.

How will our auto-expanding textarea boxes be initialized? Since our solution will be a jQuery plugin, we can implement auto-expanding functionality for every textarea on our page using the following jQuery call:


$("textarea").TextAreaExpander();

This statement is a little crude since every textarea will auto-expand and we have not specified individual height limits. Therefore, we would probably need multiple statements for every page, e.g.


$("#textarea1").TextAreaExpander();
$("#textarea2").TextAreaExpander(50, 200); // box will size between 50 and 200 pixels
$("#textarea3").TextAreaExpander(90, 300); // box will size between 90 and 300 pixels

Although this is feasible, we could have dozens of textareas. Our server-side code might also generate different textarea HTML depending on the application state. Maintaining a list of JavaScript declarations would quickly become tiresome and prone to developer errors.

So let’s make things a little easier for ourselves and other developers using our component. If we want a textarea to auto-expand, we will assign a class attribute of “expand” to the tag. Although the class attribute is normally used for CSS styles, it can hold other values and is available in all flavors of HTML and XHTML. Don’t worry if your textarea already has a CSS class applied — any number of space-separated values can be added:


<!-- expanding textarea -->
<textarea name="textarea1" rows="3" cols="60" class="mystyle expand"></textarea>

To limit the textarea height between a certain range, we can add the minimum and maximum values to the “expand” name, e.g.


<!-- expanding textarea, but limited between 50 and 200px -->
<textarea name="textarea2" rows="3" cols="60" class="expand50-200"></textarea>

When our page is loaded, the JavaScript will search the DOM for textarea nodes with an “expand” class and automatically apply the auto-expanding effect to that element. This has several advantages:

  1. Existing textarea tags will not auto-expand by default.
  2. Our trigger is specified in the textarea HTML code: it is easier to understand, read, and maintain than a separate list of JavaScript declarations.
  3. We can still use the jQuery TextAreaExpander() method when we need to, e.g. if a textarea is added to the DOM after the page has loaded.
  4. Progressive enhancement gives us a warm and cozy feeling!

Now we’ve determined our HTML code and auto-expand triggers, we can link to our JavaScript at the bottom of the page source:


<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.textarea-expander.js"></script>

This loads the latest jQuery library (downloaded from jQuery.com) and our new TextAreaExpander plugin code.

Useful resources:

Ready for some JavaScript coding? Top up that coffee and get ready for part 3

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.deanclatworthy.com Dean C

    I’m sorry but it’s ridiculous splitting this blog post into what should presumably will be 3 parts.

  • dusoft

    I agree, it is silly. SitePoint now cares for pageviews only? It seems so.

  • W2ttsy

    would the use of the rel attribute be just as good as assigning a class? was there a reason why you didn’t use the rel attribute?

  • http://www.optimalworks.net/ Craig Buckler

    @W2ttsy
    ‘rel’ is an attribute of <link> and <a> tags only and it establishes a relationship. So, your code would fail validation and it wouldn’t be semantically correct.

    ‘rel’ should also set one or more recognized link types such as alternate, feed, etc. A value of ‘expand’ is not available at this time, but it could be added at a later date to define a certain type of relationship.

    By comparison, class is safe, future-proofed, and valid in all flavors of HTML. As a bonus, it also allows you to hook CSS styles on to your expanding textareas.

  • http://www.cemerson.co.uk Stormrider

    There are a lot of things which abuse the rel attribute, using it as just a ‘spare’ attribute, and it annoys me.

    I agree it was stupid to split this into 3 parts though.

  • http://www.optimalworks.net/ Craig Buckler

    @Stormrider
    Agreed. There is an assumption that ‘rel’ can be used anywhere for any purpose. However, I have seen it used in some books and tutorials and I suspect that’s where it started.

    As for splitting this article into separate parts, it became necessary because it grew far too long (2000+ words). That wasn’t the original intention, but you could write a book about the browser quirks alone! The three parts were published within a few hours of each other, though.

  • http://www.facebook.com/wongburapha ท่านชายวุฒิ แห่งราชวังบูรพา

    nice !!

  • ท่านชายวุฒิ แห่งราชวังบูรพา

    nice !!