Little standalone TypeScript class to help with auto-sizing HTML text areas while typing.
constructor(options: AutoSizeTextAreaOptions = {})
load(element: HTMLElement)
- Adds listers to all textareas in "element" and its children.unload(element: HTMLElement)
- Removes listeners from all textareas for "element".loadTextarea(textArea: HTMLTextAreaElement)
- Add listeners to specific textarea.unloadTextarea(textArea: HTMLTextAreaElement)
- Remove listeners from specific textarea.observe(element: HTMLElement, loadExistingTextAreas: boolean = true)
- Observer specific HTMLElement for addition/removal of textareas and automatically load/unload them (JavaScript DOM changes). IfloadExistingTextAreas
is true the initial content will also be scanned for textareas and loaded.disconnect(element: HTMLElement|MutationObserver)
interface AutoSizeTextAreaOptions {
observe?: string[];
loadExistingTextAreas?: boolean;
textAreaSelector?: string;
minLines?: number;
minHeight?: number;
maxLines?: number;
maxHeight?: number;
}
This will create an observer that will monitor added and removed nodes. Upon addition/removal our listeners are automatically bound to the textarea's in those nodes. This option defaults to ['body']
. Use an empty array to disable the observer behaviour.
Additionally to observing the initial elements provided in observe
it will also load all textarea's found in them.
CSS selector for selecting textareas, defaults to textarea
but can easily be changed to eg; textarea.asta
to only work on specific text areas.
These four options can also be printed as data attribute (which take priority over the config options). Max size takes priority over min size (if max is lower than minimum size max is still used). If both min/max lines and height are specified the largest resulting number wins.
Option | Attribute | Description |
---|---|---|
minLines |
data-asta-min-lines="3" |
Sizes textareas to a minimum size of N amount of lines. (default: 3) |
minHeight |
data-asta-min-height="150" |
The minimum height specified in pixel |
maxLines |
data-asta-max-lines="3" |
Limit the maximum height of the text area to N amount of lines. |
maxHeight |
data-asta-max-height="150" |
Limits the maxmimum height of the text area to the specified amount of pixels. |
<textarea data-asta-min-lines="4"></textarea>
Prefilled textarea's are just autosized to the min/max of the content.
<textarea data-asta-max-lines="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ratio enim nostra consentit, pugnat oratio. Nobis aliter videtur, recte secusne, postea; Duo Reges: constructio interrete. Si longus, levis; Nam de isto magna dissensio est. Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Si quicquam extra virtutem habeatur in bonis. Quam si explicavisset, non tam haesitaret. At hoc in eo M.</textarea>
import AutoSizeTextArea from './AutoSizeTextArea';
new AutoSizeTextArea({
observe: ['section.content'],
minLines: undefined,
minHeight: 50,
});
import AutoSizeTextArea from './AutoSizeTextArea';
const autoSizeTextArea = new AutoSizeTextArea({
observe: [],
});
...
JavaScript creating a textarea and then loading that to bind all eventlisteners and applying the min height. Note that load and unload also take HTML blocks and then look for textarea nodes inside of it.
const textArea = document.createElement('textarea');
textArea.classList.add('auto-size'); // Not required, just to keep it in line with the initalizer.
document.body.append(textArea);
autoSizeTextArea.load(textArea);
You can remove the listeners using unload when elements are removed.
autoSizeTextArea.unload(textArea);