title: auto grow-able text area not working properly
body: <p>I used auto grow-able textarea in my jsp page to display the output in a formatted way. I expect it to grow in size to fit the height of content to be displayed. But it didn't seem to work. Here is my jsp :-</p>
  
  <pre><code>&lt;body onload="init();"&gt;
           &lt;div id="mainDivContainer"&gt;
              &lt;div id="insideMainDivContainer"&gt;
                  &lt;a href="InputTest02.html"&gt;Back&lt;/a&gt;
                  &lt;div&gt;
                      &lt;table align="center"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Text&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
  
                      &lt;%
                          List&lt;TextBean&gt; list = TextDAO.getData();
                          for (TextBean bean : list) {
                      %&gt;
                       &lt;br/&gt;
                       &lt;tbody&gt;
                      &lt;tr&gt;
                      &lt;textarea id="text" name="qa" form="form" rows="10" cols="60"&gt;&lt;%=bean.getText() %&gt;&lt;/textarea&gt;
                      &lt;/tr&gt;
                      &lt;/tbody&gt;
                      &lt;%
                          }
                      %&gt;
  
              &lt;/table&gt;&lt;/div&gt;
              &lt;/div&gt;    
          &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>and this is javascript for grow-able text area :-</p>
  
  <pre><code>var observe;
  if (window.attachEvent) {
      observe = function (element, event, handler) {
          element.attachEvent('on'+event, handler);
      };
  }
  else {
      observe = function (element, event, handler) {
          element.addEventListener(event, handler, false);
      };
  }
  function init () {
      var text = document.getElementById('text');
      function resize () {
          text.style.height = 'auto';
          text.style.height = text.scrollHeight+'px';
      }
      /* 0-timeout to get the already changed text */
      function delayedResize () {
          window.setTimeout(resize, 0);
      }
      observe(text, 'change',  resize);
      observe(text, 'cut',     delayedResize);
      observe(text, 'paste',   delayedResize);
      observe(text, 'drop',    delayedResize);
      observe(text, 'keydown', delayedResize);
  
      text.focus();
      text.select();
      resize();
  }
  </code></pre>
  
  <p>There are two issues :-</p>
  
  <ol>
  <li>The textarea is not expanding in size except for first element.</li>
  <li>The text in first element is displayed highlighted.
  Here is a screen shot of it :-
  <a href="https://i.stack.imgur.com/jomry.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jomry.png" alt="enter image description here"></a>.
  I do not understand what is wrong here. All help is welcome.</li>
  </ol>