Textarea Field Resized as Needed

You just don't know how much text a user will type or paste into a textarea form field.

What's typed might be more than will visually fit into the text box. Which is why they have scrollbars, to scroll through the content.

Still, it's easier to read and edit when all the content is visible. Scrolling interrupts the flow.

Some browsers now allow a person to resize textarea fields by dragging the lower-right corner. That, too, can be an interruption — breaking the text-composing thought process or breaking the editing focus.

For some implementations, a self-enlarging textarea field may be a wonderful solution, a text box that enlarges itself as needed.

Here's how to automatically adjust the height of a textarea form field (examples and implementation steps follow):

1. Give the textarea tag a CSS property height and a property max-height.

   The height value will be the height of the textarea field when first loaded into the browser. The max-height value will be the maximum height to allow the textarea field to expand to.

2. Give the textarea tag this attribute: onkeyup="AdjustTextareaFieldHeight(this)"

3. Put JavaScript with the AdjustTextareaFieldHeight() function somewhere below the textarea field.

Step one is the only required customization. The other two steps are copy and paste.

Live Example

The code for this example textarea field will be used in the implementation steps. The width is the full available width. The height is 100 pixels. And the maximum height is 300 pixels.

Go ahead and give it a try — so you can see how it works before deciding whether or not to implement it on your site.

Implementation Steps With Code Examples

Two things are needed: A textarea field and a bit of JavaScript.

The textarea field —

The textarea field needs a minimum of two CSS rules and an onkeyup attribute.

The CSS rules are for the property height and the property max-height. The onkeyup attribute is to call the AdjustTextareaFieldHeight() JavaScript function whenever a typed key is released or, on a mobile device, the tap is completed.

Here's the textarea field code of the example used in this article.

<textarea 
   style="height:100px; max-height:300px; width:100%;" 
   onkeyup="AdjustTextareaFieldHeight(this)">
</textarea>

The height and max-height CSS rules are colored blue and the onkeyup attribute is colored red.

Change the values of the height and max-height rules as appropriate for your implementation.

• For the height rule, specify the number of pixels for the height of the textarea field when the browser first loads.

• For the max-height rule, specify the number of pixels that's the maximum height the textarea field may expand to.

  Note: If you wish to impose no maximum height, specify no value (blank between the : and ; characters) or remove that CSS rule entirely.

The value of the onkeyup attribute should not be changed.

Here's the JavaScript with the AdjustTextareaFieldHeight() function the textarea field's onkeyup attribute calls.

<script>
function AdjustTextareaFieldHeight(box)
{
   var PaddingAtBottom = 3; // A few extra pixels to remove the scrollbar.
   if( box.scrollHeight > parseInt(box.style.height) ) { box.style.height = parseInt(box.scrollHeight+PaddingAtBottom) + "px"; }
}
</script>

The colored blue variable in the JavaScript probably is okay as it is. If you use a large font size within the textarea field, the number 3 may need to be made a bit larger, perhaps 7 or 12.

What that blue number does is insert space measured in that amount of pixels at the bottom of the textarea field. The reason is to remove the scrollbars that might otherwise be visible without that little bit of extra space.

The JavaScript is put somewhere below the form with the textarea field. That may be anywhere from immediately below the form to the bottom of the page.

As you can see, implementation is fairly easy, just a textarea field and a bit of JavaScript.

It's a nice touch, somewhat elegant actually, to make things easier for your form user.

(This article first appeared in Possibilities ezine.)

Will Bontrager