Question

How to auto-expand textarea tag in HTM, CSS, JavaScript and PHP

Answer 1

// index.php

 echo '<textarea id="textarea-id" placeholder="Write something..." rows="1"></textarea>';
 echo '<script type="text/javascript">addAutoExpandingEvent()</script>';

 /* style.css */

 textarea {  
  overflow:hidden;
  width:300px;
}

 /* functions.js */

function addAutoExpandingEvent()
{
    var textarea = document.getElementById('textarea-id');
    textarea.addEventListener('keydown', autosize);
}             
function autosize()
{
  var ta = this;
  setTimeout(function() {
    ta.style.cssText = 'height:auto; padding:0';
    ta.style.cssText = 'width:300px; height:' + ta.scrollHeight + 'px';
    
  }, 0);
}

70+ SQL courses for beginners and professionals