JavaScript: Auto Expand Textarea

by sjmcpherson

HTML

<textarea id="txtarea"n class="myclass" spellcheck="false" placeholder="Statusku...">bbbba fdsa fdsa fdsa fdsa fdsa fdsa fadsf adsfaf ad fadf dsa fads f adsfaf ad fadf dsa fads fad fdsa fdsa adaff adsfaf ad fadf dsa fads fad fdsa fdsa adaffad fdsa fdsa adafd dsa fadsf a fads fad fdsa fda fads fad fdsa fddsa fdasffdsafdsafds fdfd adfdsa fdsa fdsa fdsaf adsf dsaf dsa fbb</textarea>

CSS

body {
  padding:50px;  
}
textarea{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  margin:0px 0px;
  padding:5px;
  height:50px;
  line-height:16px;
  width:50%;
  display:block;
  margin:0px auto;    
}

JavaScript

function expandTextarea(id) {
    var $element = $('.myclass').get(0);  
    
  
    
    $element.addEventListener('focus', function() {
        this.style.overflow = 'hidden';
        this.style.height = this.scrollHeight + 'px';
    }, false);
    
    $element.addEventListener('blur', function() {
        this.style.overflow = '';
        this.style.height = "";
    }, false);
}

expandTextarea('txtarea');