HTML5的输入框高度,使用div模拟textarea，实现文本输入框高度自适应（附：js控制textarea实现文本输入框高度自适应） - h...

一、使用textarea标签进行多行文本的输入有很多限制，比如不能实现高度自适应，会出现难看的滚动条等问题。

HTML5中添加了一个新属性contenteditable，该属性可以让input,textarea以外的不可编辑的标签具备可编辑功能；

用法如下：

//contenteditable="true"　　当属性值为true的时候，可编辑标签内可以写入标签，对于复制的具有样式的内容，其样式会保留；

我是可编辑的富文本框

//contenteditable="plaintext-only"　　当属性值为plaintext-only时，该可编辑标签内只能写入纯文本的数据，对于复制的具有样式的内容，会转换为纯文本，而将样式标签等内容过滤掉；

二、如果不使用该属性，可以使用js控制textarea的高度；原理是当textarea出现滚动条时，增加其高度，使滚动条消失。

怎样判断是否出现滚动条，其方法是但元素的scrollHeight大于offsetHeight的时候，即出现了滚动条；

实现方法如下：

//html

//css

#text{

font-size: 20px;

overflow: hidden;　　//必须

}

//js

$('#text').on('input',function(){if(text.scrollHeight>text.offsetHeight){THeight+= 20;　　//font-size的大小是20，因此每次给textarea的高度增加20px$('#text').css('height',THeight);}})