div模拟textarea文本域轻松实现高度自适应

众所周知文本域不能做到随着内容自适应高度的。

这里提供一个平替方法 就是div+contenteditable属性

<div class="test_box" contenteditable="true"><br /></div> 

.test_box {
    width: 400px; 
    min-height: 120px; 
    max-height: 300px;
    _height: 120px; 
    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;
}

看效果可以看到div在获取焦点的时候，会有个黑色边框，如果想要去掉需要设置outline属性为none

需要注意这个div可以识别富文本需要注意安全问题，最好可以做html标签的过滤

另外看到有一篇文章记录了四种实现textarea自适应的方法，希望可以帮助到敏娜