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

In 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:

Existing textarea tags will not auto-expand by default.
Our trigger is specified in the textarea HTML code: it is easier to understand, read, and maintain than a separate list of JavaScript declarations.
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.
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…