<style>
#textarea-wrap {
  background:#fff;
  position:relative;
  margin:20px;
  border:1px #DADDE0 solid;
}
#textarea-wrap textarea,
#textarea-wrap pre {
  margin: 0;
  padding: 10px;
  outline: 0;
  border: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
  background:transparent;
  display:block;
  font-family:sans-serif;
  line-height:1.4;
}
#textarea-wrap textarea {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  resize:none;
}
#textarea-wrap pre {
  min-height:100px;
  visibility:hidden;
}
</style>

<div id='textarea-wrap'>

  <textarea placeholder='Go ahead, type away...'></textarea>
  
  <pre></pre>

</div>

<script>

var wrap = document.getElementById('textarea-wrap'),
    ta = wrap.getElementsByTagName('textarea')[0],
    pre = wrap.getElementsByTagName('pre')[0];

ta.oninput = function(e) { pre.innerHTML = e.target.value + 8 }

</script>

늘어나는 Textarea mobile webkit ver.

JavaScript