????????? textarea高度隨內(nèi)容自適應(yīng) ?????????

textarea高度隨內(nèi)容自適應(yīng)，不依賴任何第三方插件，若不需要自動(dò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>
    不需要自動(dòng)高度，添加 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>