textarea自动适应内容的高度 window.activeo

解决方法：添加两个事件

onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';},200);"   
onblur="clearInterval(this.clock);"

自己项目应用：

<div class="form-mid-text" @click="clickMask" ref="formMid">
    <div class="form-text-input-mask" @click="clickMask">
        <div class="form-text-input-mask-upper">正文内容排版为图片加正文，500字以内</div>
        <div class="form-text-input-mask-lower">若需发布图文混排的公告，可前往往幼儿园管理后台发布</div>
    </div>
    <textarea name="formText" id="formText" v-model="form.body" maxlength="500" ref="textArea" onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';},200);" onblur="clearInterval(this.clock);" @blur="textAreaBlur" class="form-mid-input"></textarea>
</div>

js 用了onblur和@blur可以同时用

<script>
methods： {
  clickMask () {
      document.getElementsByClassName('form-text-input-mask')[0].style.display = 'none'
      document.getElementById('formText').style.display = 'block'
      // document.getElementById('formText').style.height = this.$utils.rem2px(2.38) + 'px'
      document.getElementById('formText').focus()
  },
  textAreaBlur () {
      if (document.getElementById('formText').value.length === 0) {
        document.getElementsByClassName('form-text-input-mask')[0].style.display = 'block'
        document.getElementById('formText').style.display = 'none'
      }
      document.getElementById('formText').blur()
    },
}
<script>

css 要设置最大和最小高度

.form-mid-input {
    display: none;
    width: calc(100% - .12rem);
    min-height: 2.18rem;
    max-height: 8.72rem;
    font-family: 'PingFangSC-Regular';
    font-size: .28rem;
    line-height: .42rem;
    color: #333333;
    outline: none;
    border: none;
    resize:none;
  }

这个方法简单好用 比之前的方案（通过监听实现，地址：https://www.jianshu.com/p/33c399890771
）好用，之前的方案适用于有最大高度的文本输入

原文链接：https://blog.csdn.net/hql1439493352/article/details/95359596