终极答案

前些日子有过textarea高度自适应的需求，找到一个插件flexText,
虽然没有用上去，但是的精简的代码很吸引我。

它是原理是这样的，HTML结构如下：

<p class="expandingArea ">
    <pre><span></span><br></pre>
    <textarea placeholder="输入文字"></textarea>
</p>

其中的expandingArea的样式仅有

.expandingArea{
    position:relative;
}

目的是用于textarea相对于expandingArea绝对定位：

textarea{
    position:absolute;
    top:0;
    left:0；
    height:100%;
}

通过这样的样式设置，textArea的高度会始终等于expandingArea的高度，要让textarea的高度变化也只需要调整
expadingArea的高度即可。那么怎么样让expandingArea的高度变化随内容高度变化而变化呢？pre是比较重要的
东西。

pre{
    display:block;
    visibility:hidden;
}

pre以块形式存在，并且不可见，但是是占用空间的，不像display:none;什么空间也不占。这时需要把textarea中的内容实实的同时到pre里的span标签中，因为pre没有postion:absolute所以它的高度会一直影响expandingArea的高度。总结原理就是：pre会随内容的高度变化而变化，expandingArea的高度又随pre变化，因为textarea的高度100%textarea的高度会随expandingArea变化，只要同步textarea的内容到pre中，就达到一个textarea随内容高度变化的目的了。

关于这个方法的兼容性问题 在这个方法的创始人博客有提到NEIL JENKINS。个人觉得这个方法是牛逼的，没有通过计算，逻辑上它像上思维推导，代码实现不复杂，轻松愉快。在这个例子中又看到了一次合理的结构可以简化代码的案例:)。

可以添加一个隐藏的textArea（类似1楼的方法），取这个textArea的scrollHeight然后设置给输入的textArea，不过这里还是要处理取值后的一些兼容性问题。关于keyup事件的问题，最好是用oninput事件和onpropertychange事件来替代，这样可以处理用鼠标添加或删除文字的问题，不过貌似ie9下使用backspace键删除文字不会触发onpropertychange事件，需要单独处理一下

表示回车的时候增加一字行高就应该不会出现滚动条闪烁的问题了吧?

/** fake code **/
textarea.keydown = function(e){
    if e.keycode == 13 { //忘了回车的 key code 是不是13了
        textarea.height = textarea.height + 1em;
    }
}

试一下

/** fake code **/
textarea.keydown = function(e){
    if e.keycode == 13 { //忘了回车的 key code 是不是13了
        textarea.height = textarea.height + 1em;
    }
}

我的思路是，用一个p实时去获取textarea的内容，因为p高度是根据内容变化而变化的。我们可以得到p的高度，再反过来把p的高度设置给textarea。