textarea高度自适应，随着内容增加高度增加

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
链接:http://caibaojian.com/textarea-autoheight.html
来源:http://caibaojian.com

textarea高度自适应，textarea高度自动增高，textarea高度自动撑开，本文通过复制textarea的html给另外一个元素pre,由于设置pre自动展开，所以不会存在有滞留的感觉，交互效果较好。

技术原理
textarea高度自适应是一个比较常用的前端开发效果。 在新浪微博的输入框中也有这个效果，不过它那个效果不怎么好看，高度展开有点延迟，可能是通过给高度赋值scrollHeight.而下面这个则是通过复制textarea的html并另外一个元素pre,由于设置pre自动展开，所以不会存在有滞留的感觉，交互效果较好。

兼容情况
在使用之前，推荐两个比较好的事件，分别是oninput和onpropertychange，在textarea发生变化时，可以通过监听这两个事件来触发你需要的功能，看一下兼容情况：

1.Firefox、Chrome、IE9，IE10 均支持 oninput 事件，此外所有版本的 IE 均支持 onpropertychange 事件。
2.oninput 事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl + x）、粘贴（ctrl + v）及鼠标剪切与粘贴时触发（在 IE9 中只在输入、粘贴、鼠标粘贴时触发）。
3.onpropertychange 事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl + x）、粘贴（ctrl + v）及鼠标剪切与粘贴时触发（在 IE9 中只在输入、粘贴、鼠标粘贴时触发）（仅 IE 支持）。
4.backspace、delete 两个按键的 keyCode 分别为 8、46。
5.oncut 事件在粘贴（ctrl + v）、鼠标粘贴时触发。
演示代码
CSS