<textarea> 标签定义一个多行的文本输入控件。但是它不能像div一样随着内容增加而自动增加,一言不合就出现滚动条,有是有为了更好的交互,可能需要使用div来模拟textarea的实现,直奔主题吧。
1、内容可编辑 contenteditable
对就是contenteditable,给div添加contenteditable=true即可;
CSS代码:
div{ width: 400px; min-height: 100px; max-height: 300px; _height: 100px; margin-left: auto; margin-right: auto; padding: 3px; outline: 0; border: 1px solid #a0b3d6; font-size: 12px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto; /* 超过最大高度就出现滚动条 */ _overflow-y: visible; }
HTML代码:
<div contenteditable="true"> .....此处省略..... </div>