Software, your way.
How To Get Good Custom Software
(Download)
(PDF)
burger menu icon
WillMaster

WillMaster > LibraryManaging Website Forms

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

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

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

Support Area – Ask Your Question Here

The "Code in articles help" forum at the Willmaster.com support area is the place to get information about implementing JavaScript and other software code found on Willmaster.com

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List
software index page

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC