Article Categories

Selected Reading

Auto Grow a Textarea with JavaScript in CSS

CSS Javascript Web Development Front End Technology

Auto-growing textareas improve user experience by dynamically adjusting their height based on content length. This eliminates the need for scrollbars and provides a seamless typing experience. We can achieve this functionality using JavaScript to monitor content changes and CSS to control the visual appearance.

Syntax

textarea {
    resize: none;
    overflow: hidden;
    min-height: initial-height;
}

Method 1: Basic Auto-Growing Textarea

This example demonstrates a simple auto-growing textarea that expands vertically as content is added −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
        background-color: #f5f5f5;
    }
    
    .container {
        max-width: 500px;
        margin: 0 auto;
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #333;
    }
    
    #autoTextarea {
        width: 100%;
        min-height: 80px;
        padding: 12px;
        border: 2px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
        font-family: Arial, sans-serif;
        resize: none;
        overflow: hidden;
        box-sizing: border-box;
        transition: border-color 0.3s ease;
    }
    
    #autoTextarea:focus {
        outline: none;
        border-color: #4CAF50;
    }
</style>
</head>
<body>
    <div class="container">
        <label for="autoTextarea">Auto-Growing Textarea:</label>
        <textarea id="autoTextarea" placeholder="Start typing and watch me grow..."></textarea>
    </div>
    
    <script>
        const textarea = document.getElementById('autoTextarea');
        
        function autoResize() {
            textarea.style.height = 'auto';
            textarea.style.height = textarea.scrollHeight + 'px';
        }
        
        textarea.addEventListener('input', autoResize);
        textarea.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                setTimeout(autoResize, 0);
            }
        });
    </script>
</body>
</html>

A styled textarea appears with a placeholder. As you type content or press Enter, the textarea automatically expands vertically to accommodate the text without showing scrollbars.

Method 2: Auto-Growing with Maximum Height

This example adds a maximum height constraint and enables scrolling when the limit is reached −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
        background-color: #f0f8ff;
    }
    
    .form-group {
        max-width: 400px;
        margin: 0 auto;
        background: white;
        padding: 25px;
        border-radius: 10px;
        border: 1px solid #e0e0e0;
    }
    
    label {
        display: block;
        margin-bottom: 10px;
        font-weight: bold;
        color: #2c3e50;
    }
    
    #limitedTextarea {
        width: 100%;
        min-height: 60px;
        max-height: 200px;
        padding: 15px;
        border: 2px solid #3498db;
        border-radius: 6px;
        font-size: 14px;
        font-family: 'Courier New', monospace;
        resize: none;
        overflow-y: auto;
        box-sizing: border-box;
        background-color: #fafafa;
    }
    
    #limitedTextarea:focus {
        outline: none;
        border-color: #2980b9;
        background-color: white;
    }
    
    .char-count {
        margin-top: 8px;
        font-size: 12px;
        color: #7f8c8d;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="form-group">
        <label for="limitedTextarea">Textarea with Max Height (200px):</label>
        <textarea id="limitedTextarea" placeholder="Type here... I'll grow up to 200px then enable scrolling"></textarea>
        <div class="char-count" id="charCount">0 characters</div>
    </div>
    
    <script>
        const textarea = document.getElementById('limitedTextarea');
        const charCount = document.getElementById('charCount');
        
        function autoResizeWithLimit() {
            textarea.style.height = 'auto';
            const maxHeight = 200;
            const newHeight = Math.min(textarea.scrollHeight, maxHeight);
            textarea.style.height = newHeight + 'px';
            
            // Update character count
            charCount.textContent = textarea.value.length + ' characters';
        }
        
        textarea.addEventListener('input', autoResizeWithLimit);
        textarea.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                setTimeout(autoResizeWithLimit, 0);
            }
        });
    </script>
</body>
</html>

A textarea with a blue border appears. It grows as you type until reaching 200px height, then a scrollbar appears for additional content. A character counter shows below the textarea.

Key CSS Properties

Property	Value	Purpose
`resize`	`none`	Prevents manual resizing by user
`overflow`	`hidden`	Hides scrollbars during auto-growth
`min-height`	`px/em`	Sets initial minimum height
`max-height`	`px/em`	Limits maximum growth (optional)

Conclusion

Auto-growing textareas enhance user experience by eliminating scrollbars and providing intuitive content expansion. The key is using JavaScript to monitor input events and dynamically adjust the height property based on the element's scrollHeight.

AmitDiwan

Updated on: 2026-03-15T15:35:23+05:30

514 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next