div模拟textarea实现高度自增长

今天看到有人在问能不能实现手机输入框的高度随着文字增多而增长，到手机顶部的时候再增加内容，出现滚动条。

textarea 的高度是固定的，内容超出就会出现滚动条，使用js控制的话效果不是很理想，所有准备使用div来模拟 textarea，这就要不得不提html5的一个新属性 contenteditable

<div id="textarea" contenteditable="true"></div>

contenteditable 顾名思义就是内容可编辑，使用之后div的内容就可以编辑了，为了实现跟 textarea 一样的显示效果，我们只需要对div的样式进行设置一下就行。

#textarea {
     width:300px;
     border:1px solid #ccc;
     min-height:150px;
     max-height:300px;
     overflow: auto;
     font-size: 14px;
     outline: none; 
}

这样就可以了，完美的模拟textarea进行编辑内容，提交的时候，我们只需要获取一下div里面的内容就可以了。

另外这个方法还可以实现，在div内部改变部分字体的样式，颜色等，是不是很方便。