输入框实现高度自适应的几种解决方案

最近在工作中遇到这个问题了，网上找了一些解决方案，全都试了一遍，有些没用有些有用，在此把靠谱的方法写出来。

一.div模拟textarea以实现高度自适应

.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;
-webkit-user-modify: read-write-plaintext-only;
}

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

if (typeof document.webkitHidden == "undefined") {
// 非chrome浏览器阻止粘贴
box.onpaste = function() {
return false;
}
}


注意事项：

1.焦点：outline:0;

2.清除p标签的margin值：.test_box p{ margin: 0; }

3.可编辑模式的div标签与textarea一样，是支持focus, blur事件的。自然也支持focus伪类，demo页面中Firefox等现代浏览器获取焦点时的外发光就是使用的:focus。

二.用JS控制来实现：方法一