title: Resize TextArea on load
body: <p>I'm having issues trying to resize a text area, I can do it as the user is typing but when they have submit it this gets put into a database and put into a text area below and display as a message on a message board but if the message exceeds the size of the Text Area it's not displayed I was wondering if anyone out there has had this issue and overcome it.</p>
  
  <p>Here is the solution I came up with for the resizing whilst typing,</p>
  
  <pre><code>function resizeTextarea (id) {
    var a = document.getElementById(id);
    a.style.height = 'auto';
    a.style.height = a.scrollHeight+'px';
  }
  
  function init() 
  {
    var a = document.getElementsByTagName('textarea');
    for(var i=0,inb=a.length;i&lt;inb;i++) 
    {
       if(a[i].getAttribute('data-resizable')=='true')
       {
        resizeTextarea(a[i].id);
       }
    }
  }
  
  addEventListener('DOMContentLoaded', init);
  </code></pre>
  
  <p>This is called on keyup on the textarea in my other page where ive used it but I have tried to do something like this to resize when it loads but it doesn't work but it does work when a key is pressed or a button is clicked.</p>
  
  <pre><code>onload="resizeTextarea('commentstext');"
  </code></pre>
  
  <p>I know i could always have it scrollable or put it into a div but divs don't format the text like a textarea if i do a line break in the text and submit it to a div ti wont be there</p>