Auto Increase The Height Of Texarea Element While Typing

Category: Form , Javascript | April 7, 2020
Author:Louis Lazaris
Views Total:2,354 views
Official Page:Go to website
Last Update:April 7, 2020


Auto Increase The Height Of Texarea Element While Typing


A modern JavaScript solution for auto-resizing text field that dynamically increases or decreases the height of a textarea element depending on the content size the user typed.

How to use it:

1. Add the CSS class ‘txta’ to textarea elements within the document.

<textarea class="txta"></textarea>

2. The JavaScript to create a hidden DIV block so the textarea is able to read the height of its content.

// Targets all textareas with class "txta"
let textareas = document.querySelectorAll('.txta'),
    hiddenDiv = document.createElement('div'),
    content = null;
// Adds a class to all textareas
for (let j of textareas) {
// Build the hidden div's attributes
// The line below is needed if you move the style lines to CSS
// hiddenDiv.classList.add('hiddendiv');
// Add the "txta" styles, which are common to both textarea and hiddendiv
// If you want, you can remove those from CSS and add them via JS
// Add the styles for the hidden div
// These can be in the CSS, just remove these three lines and uncomment the CSS = 'none'; = 'pre-wrap'; = 'break-word';
// Loop through all the textareas and add the event listener
for(let i of textareas) {
  (function(i) {
    // Note: Use 'keyup' instead of 'input'
    // if you want older IE support
    i.addEventListener('input', function() {
      // Append hiddendiv to parent of textarea, so the size is correct
      // Remove this if you want the user to be able to resize it in modern browsers = 'none';
      // This removes scrollbars = 'hidden';
      // Every input/change, grab the content
      content = i.value;
      // Add the same content to the hidden div
      // This is for old IE
      content = content.replace(/\n/g, '<br>');
      // The <br ..> part is for old IE
      // This also fixes the jumpy way the textarea grows if line-height isn't included
      hiddenDiv.innerHTML = content + '<br style="line-height: 3px;">';
      // Briefly make the hidden div block but invisible
      // This is in order to read the height = 'hidden'; = 'block'; = hiddenDiv.offsetHeight + 'px';
      // Make the hidden div display:none again = 'visible'; = 'none';

3. Apply the following CSS to both the textarea and the hidden clone.

.txta {
  width: 100%;
  max-width: 500px;
  min-height: 100px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  overflow: hidden;
  line-height: 1.4;

4. The ‘.hiddendiv’ styles are added with JS. You can remove the JS lines and use CSS instead.

.hiddendiv {
  display: none;
  white-space: pre-wrap;
  word-wrap: break-word;

See It In Action:

See the Pen
Textarea Auto-Resize with JavaScript
by Louis Lazaris (@impressivewebs)
on CodePen.

You Might Be Interested In:

Leave a Reply