```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textarea高度自适应，不依赖任何第三方插件</title>
<style>
* {
margin: 0;
padding: 0
}
.box {
margin: 50px auto;
border: 1px solid red;
width: 600px;
min-height: 300px;
padding: 10px;
}
textarea{padding: 5px;width: 30%}
</style>
</head>
<body>
<div class="box">
<h2>只关心逻辑不关心样式的文本框高度自定义</h2>
<br>
<!-- 不想自动高度 就添加 data-allow="no-allow"-->
<textarea data-allow="no-allow" placeholder="高度不变"></textarea>
<textarea placeholder="高度自适应"></textarea>
<textarea placeholder="高度自适应"></textarea>
</div>
<script src="diy-auotHeight.js"></script>
</body>
</html>
```
```javascript
void function () {
function DiyArea (el) {
this.el = el || {}
this.config = {
el: document.querySelectorAll('textarea')
}
this.init()
}
DiyArea.prototype = {
init: function () {
this.bindEvent()
},
bindEvent: function () {
if (!this.config.el) {
return false
}
if (this.config.el[0].addEventListener) {
for (var i = 0; i < this.config.el.length; i++) {
if (this.config.el[i].getAttribute('data-allow') === 'no-allow') {
continue
}
this.config.el[i].addEventListener('input', function (e) {
console.log(this.style.height)
this.style.height = 'auto'
this.style.height = this.scrollHeight + 'px'
})
}
}
}
}
return new DiyArea('diy-area')
}()
```
