No Login Data Private Local Save

Auto‑Resize Textarea Demo - Online Grow with Content

7
0
0
0

Auto‑Resize Textarea Demo

Experience a textarea that grows with your content. No more scrollbars — just seamless expansion. Compare with a standard fixed textarea in real time.

Standard Textarea
Height: 150px Lines: 0 Chars: 0
Auto‑Resize Textarea
Height: 0px Lines: 0 Chars: 0
Configuration
Preset Scenarios
Core JavaScript (Copy & Use) 
function autoResizeTextarea(textarea) {
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
}

// Attach to your textarea
const ta = document.getElementById('myTextarea');
ta.addEventListener('input', () => autoResizeTextarea(ta));

// Also trigger on window resize
window.addEventListener('resize', () => autoResizeTextarea(ta));

// With max-height support
function autoResizeWithMax(textarea, maxHeight) {
  textarea.style.height = 'auto';
  const newHeight = Math.min(textarea.scrollHeight, maxHeight);
  textarea.style.height = newHeight + 'px';
  textarea.style.overflowY = textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';
}

Also check out the modern CSS approach: field-sizing: content; (Chrome 123+)

Frequently Asked Questions

An auto-resize textarea is a text input field that dynamically adjusts its height based on the content entered by the user. Unlike standard textareas with fixed heights that require scrolling, auto-resize textareas grow and shrink to perfectly fit the content. This improves user experience by eliminating unnecessary scrollbars, allowing users to see their entire input at a glance — especially useful for comment boxes, chat inputs, forms, and code editors.

The technique uses the scrollHeight property, which returns the full height of an element's content (including overflow). The process is: ① Reset height to auto (allows the browser to calculate the natural height), ② Read scrollHeight to get the actual content height, ③ Set the element's height to that value. This is triggered on input events. For max-height support, simply clamp the value and toggle overflow-y between hidden and auto.

Yes! The modern CSS property field-sizing: content; enables native auto-resize behavior for textareas. Simply apply textarea { field-sizing: content; } in your stylesheet. However, browser support is limited — it works in Chrome 123+ and Edge 123+, but Firefox and Safari do not yet support it (as of 2025). For production use with broad compatibility, the JavaScript scrollHeight method remains the recommended approach. You can use @supports (field-sizing: content) for progressive enhancement.

To prevent the textarea from growing indefinitely, clamp the calculated height: newHeight = Math.min(scrollHeight, maxHeight). When the content exceeds maxHeight, switch overflow-y to auto so a native scrollbar appears. This gives users the best of both worlds — automatic growth for reasonable amounts of text, with a safety net for extremely long content. Try adjusting the Max Height slider in the configuration panel above to see this in action.

Yes, auto-resize textareas work excellently on mobile. In fact, they're even more valuable on mobile where screen space is limited and internal scrollbars are cumbersome. The scrollHeight method works consistently across iOS Safari, Android Chrome, and all modern mobile browsers. One tip: listen for orientationchange and resize events to recalculate height when the viewport changes (e.g., when the virtual keyboard appears). Also consider using debounce on resize events for smoother performance.

React: Use a ref and attach the onInput handler. You can create a custom hook like useAutoResize(ref, maxHeight) for reusability.
Vue: Use @input with a template ref ($refs) or create a custom directive v-auto-resize.
Angular: Use @HostListener('input') or (input) event binding with ElementRef.
For all frameworks, consider using a lightweight library like autosize (npm) which handles edge cases, or wrap the native scrollHeight logic in a framework-idiomatic way. The core principle remains the same across all frameworks.

For most use cases, the performance impact is negligible. The scrollHeight read and height write are fast DOM operations. However, if you're also performing heavy operations on each keystroke (like real-time Markdown preview, auto-save to server, or complex validation), consider debouncing those additional operations while keeping the resize itself synchronous for smooth visual feedback. Avoid forcing layout thrashing — the standard pattern (reset height → read scrollHeight → set height) is already optimized to minimize reflows.

Auto-resize textareas shine in many scenarios: 💬 Chat & messaging apps (input grows with longer messages), 📝 Comment & review forms (users can see their full comment), 📧 Email compose interfaces (body field adapts to content), 💻 Code editors & REPLs (no wasted space), 📋 Feedback & support forms (encourages detailed responses), 📱 Mobile-optimized forms (critical where screen space is precious), and 🗒️ Note-taking apps (distraction-free writing). Anywhere users type variable-length text, auto-resize improves the experience.
🔧 Related Tools