title: How to stop window jumping when typing in autoresizing textarea
body: <p>I am using the accepted answer to <a href="https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize?rq=1" title="Creating a textarea with auto-resize">this question</a> to build a textarea that expands vertically as text overflows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;autoresizing textarea&lt;/title&gt;
  &lt;style type="text/css"&gt;
  textarea {
   border: 0 none white;
   overflow: hidden;
   padding: 0;
   outline: none;
   background-color: #D0D0D0;
   resize: none;
  }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  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();
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="init();"&gt;
  &lt;textarea rows="1" style="height:1em;" id="text"&gt;&lt;/textarea&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It works well until the size of the textarea grows longer than the browser window. At that point the top of the window jumps to the top of the textarea every time a key is pressed. Can you help me understand why and how to fix it?</p>
  
  <p>An ideal fix would be to keep the page from moving at all. But if it's easier to keep the bottom of the page tied to the bottom of the textarea, that would work too.</p>
  
  <p>I am having this issue in Firefox 21.0 and Chrome 28.0: <a href="http://jsfiddle.net/CbqFv/" rel="noreferrer">http://jsfiddle.net/CbqFv/</a></p>