textarea高度随内容自适应,不依赖任何第三方插件,若不需要自动高度,添加 data-allow="no-allow" 即可。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>textarea高度随内容自适应,不依赖任何第三方插件</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高度随内容自适应,不依赖任何第三方插件</h2> 不需要自动高度,添加 data-allow="no-allow" 即可。 <br><br><br> <textarea data-allow="no-allow" placeholder="高度不变"></textarea> <textarea placeholder="高度自适应"></textarea> <textarea placeholder="高度自适应"></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>