# jackmoore/autosize

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jackmoore-autosize).**

5,092 stars · 692 forks · JavaScript · MIT · archived

## Links

- GitHub: https://github.com/jackmoore/autosize
- Homepage: http://www.jacklmoore.com/autosize/
- awesome-repositories: https://awesome-repositories.com/repository/jackmoore-autosize.md

## Description

autosize is a client-side JavaScript utility that automatically adjusts the height of HTML textarea elements to fit their text content. It functions as a DOM layout tool designed to manage the dimensions and scrolling behavior of input fields in real time.

The utility handles dynamic resizing during user typing and window resize events. It supports height constraints by comparing calculated dimensions against CSS minimum and maximum properties to restore overflow scrolling when limits are reached.

The tool provides capabilities to monitor resize events, manually trigger layout refreshes for programmatic content changes, and remove height automation to revert elements to their original state.

## Tags

### Part of an Awesome List

- [Text Input Resizing](https://awesome-repositories.com/f/awesome-lists/devtools/text-inputs/text-input-fields/dynamic-height-adjustments/text-input-resizing.md) — Automatically adjusts the height of HTML textarea elements to fit their text content in real time. ([source](https://cdn.jsdelivr.net/gh/jackmoore/autosize@master/README.md))

### User Interface & Experience

- [Auto-Resizing Utilities](https://awesome-repositories.com/f/user-interface-experience/textarea-components/auto-resizing-utilities.md) — Automatically adjusts the height of HTML textarea elements to fit their text content in real time.
- [DOM Dimension Utilities](https://awesome-repositories.com/f/user-interface-experience/dom-dimension-utilities.md) — Provides a utility for managing the dimensions and scrolling behavior of input fields based on content changes.
- [Dynamic Height Implementations](https://awesome-repositories.com/f/user-interface-experience/measurement-tools/dynamic-size-calculators/runtime-height-calculators/dynamic-height-implementations.md) — Calculates required element height by measuring the total scrollable content area of the textarea.
- [Auto-Resizing Input Areas](https://awesome-repositories.com/f/user-interface-experience/plain-text-input-fields/multiline-text-areas/auto-resizing-input-areas.md) — Provides input fields that dynamically change their vertical size based on the length of the entered text.
- [Text Editors](https://awesome-repositories.com/f/user-interface-experience/text-editors.md) — Enables the creation of simple text editing interfaces where the input field expands to match the text length.
- [Layout Recalculation Triggers](https://awesome-repositories.com/f/user-interface-experience/layout-recalculation-triggers.md) — Exposes a manual trigger to force the recalculation of textarea height when content is changed programmatically.
- [Adaptive Vertical Heights](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/navigation-flow-controllers/vertical-slide-stacks/adaptive-vertical-heights.md) — Recalculates the vertical size of a text area when external scripts change the content or layout. ([source](http://jacklmoore.com/autosize))
- [Sizing Constraints](https://awesome-repositories.com/f/user-interface-experience/textarea-components/sizing-constraints.md) — Limits how much a text input grows by using height boundaries and restoring scrollbars at the maximum limit. ([source](http://www.jacklmoore.com/autosize/))
- [Web Form Input Optimizations](https://awesome-repositories.com/f/user-interface-experience/web-form-input-optimizations.md) — Improves the typing experience in web forms by removing the need for manual scrollbars in multi-line text fields.

### Web Development

- [Client-Side Scripting](https://awesome-repositories.com/f/web-development/client-side-scripting.md) — Functions as a lightweight browser script that handles real-time height recalculations for text inputs.
- [Style Property Manipulators](https://awesome-repositories.com/f/web-development/dom-element-manipulators/style-property-manipulators.md) — Programmatically updates the CSS height property of textarea elements in real time to fit their content.
- [UI Event Listeners](https://awesome-repositories.com/f/web-development/event-driven-architectures/ui-event-listeners.md) — Triggers height recalculations by listening to keyboard input and window resize events.
- [Input Height Constraints](https://awesome-repositories.com/f/web-development/responsive-layout-adaptation/css-media-queries/media-overflow-constraints/input-height-constraints.md) — Provides height boundaries that compare calculated content size against CSS min and max properties to manage overflow scrolling.