textarea高度隨內(nèi)容自適應(yīng)，不依賴任何第三方插件，若不需要自動高度，添加 data-allow="no-allow" 即可。
textarea高度自適應(yīng)代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>textarea高度隨內(nèi)容自適應(yīng)，不依賴任何第三方插件</title>
<style>
* {
margin: 0;
padding: 0
}
.box {
margin: 50px auto;
border: 1px solid #ccc;
width: 600px;
min-height: 300px;
padding: 10px;
}
textarea{padding: 5px;width: 30%}
</style>
</head>
<body>
<div>
<h2>textarea高度隨內(nèi)容自適應(yīng)，不依賴任何第三方插件</h2>
不需要自動高度，添加 data-allow="no-allow" 即可。
<br><br><br>
<textarea data-allow="no-allow" placeholder="高度不變"></textarea>
<textarea placeholder="高度自適應(yīng)"></textarea>
<textarea placeholder="高度自適應(yīng)"></textarea>
</div>
<script>
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')
}()
</script>
</body>
</html>