使用div来高仿textarea标签

阐述背景

-> 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代码*/
    }

效果图对比

插入图片