Growing an Input with Its Content - J Query

Problem
A textarea is part of an interface and is often too large or too small, depending on the user’s input. Either it’s too big and other important elements get out of sight, or it’s too small and the user has to scroll too much.

Solution

Use the elastic plugin to start with a small default height and have the height auto grow when the user enters a certain amount of text.Usage is plain and simple. Start with a textarea:

Discussion

The plugin binds both a timer and a blur event to the textarea to look for changes. When the content changes, it copies the content into a hidden textarea with the same styles applied to it as the original, calculates the new height for that, and if it exceeds the current height of the original, starts an animation to adapt. This allows the textarea to both grow and shrink as content is added or removed.
An alternative is to let the user resize the textarea. Safari offers that by default for any textarea. The jQuery UI resizable plugin can add that to other browsers as well. Starting with the same textarea, we apply the resizable plugin, customizing the handle option to display only one handle on the bottom right:

With that and the jQuery UI base theme included, the handle gets displayed below the textarea. To move it into the bottom-right corner of the textarea, we have to add some CSS:


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics