阐述背景
-> textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条,高度固执地岿然不动。所以,有时候,为了增加交互体验,让文本域高度自适应的时候,就会遇到麻烦。如果没设置style=’resize: none’,则可以拖动文本框的大小,会造成页面的重排和重绘。
textarea实现代码
<textarea style='resize: none'></textarea>
textarea {
margin: 0 auto;
display: block;
width: 400px;
height: 120px;
margin-bottom: 100px;
}
div实现代码
<div contenteditable="true" class="text-box"><br/></div>
.text-box {
width: 400px;
min-height: 120px;
max-height: 300px;
_height: 120px;/* 兼容IE代码*/
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
/*现代浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框,可以去掉虚框*/
border: 1px solid rgb(169, 169, 169);
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
_overflow-y: visible; /*兼容IE代码*/
}