我注意到现在SF的评论框已经是高度自适应了，也就是说无论你输入多少个字也不会有那个讨厌的滚动条了，这点很好。我大概看了一下它的技术实现，好像是把textarea替换成一个div，然后把当前的div的contentEditable设置为true。这个实现跟quora的实现比较像。

但是这种实现有个问题，就是对浏览器的支持不是太好，当然SF是明确不支持IE6的，其它版本的IE我手头没有，不知道支持情况如何。就通常情况来说，ie对contentEditable需要做特别多hack才能保持兼容。另一个浏览器就是opera，opera对div的contentEditable支持是最近才开始的。

另一种实现就是，你在网上搜索就会得到的答案，用代码来说话就是

$('textarea').keyup(function () {
    $(this).height(this.scrollHeight);
});

基本上所有的jquery插件核心都是这段代码，但是实际上它的效果非常坑爹

它响应的是keyup事件，因此也就是说肯定会有延迟。其视觉表现就是，先出现一个滚动条，然后这个文本框再被拉长。这样的体验非常别扭。
它也有兼容性问题，再某些浏览器上(比如safari)，它的scrollHeight会莫名奇妙地多出一些，看起来非常奇怪。
以上就是我对这个功能的分析，我想要的就是一个普通的文本框，在大部分浏览器(可以忽略ie6)下都能敏捷地响应拉伸。如果你是用contentEditable实现，你需要支持以下功能

拷贝文字时只拷贝纯文本，html会被过滤掉
换行支持良好
支持undo和redo
这种文本框体验上其实非常好，如果能在这里讨论出一种比较好地解决方案，也可以造福很多前端开发者。

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

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

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

其中的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。个人觉得这个方法是牛逼的，没有通过计算，逻辑上它像上思维推导，代码实现不复杂，轻松愉快。在这个例子中又看到了一次合理的结构可以简化代码的案例:)。