textarea 自适应高度

// 监听textarea
let observe
if (window.attachEvent) {
  observe = function (element, event, handler) {
    if (element) {
      element.attachEvent('on' + event, handler)
    }
  }
} else {
  observe = function (element, event, handler) {
    if (element) {
      element.addEventListener(event, handler, false)
    }
  }
}
... // 省略代码
mounted () {
  this.initWatchTextarea()
},
data () {
  return {
    handleAreaHeight: false
  }
}
... // 省略代码
initWatchTextarea () {
  // 监听textarea
  let self = this
  let text = document.getElementById('address') // textarea
  function resize () {
    text.style.height = '.4rem'
    if (self.handleAreaHeight) {
      text.style.height = text.scrollHeight + 'px'
    } else {
      setTimeout(() => {
        text.style.height = text.scrollHeight + 'px'
        self.handleAreaHeight = true
      }, 500)
    }
  }
  /* 0-timeout to get the already changed text */
  function delayedResize () {
    window.setTimeout(resize, 0)
  }
  observe(text, 'change', delayedResize)
  observe(text, 'cut', delayedResize)
  observe(text, 'paste', delayedResize)
  observe(text, 'drop', delayedResize)
  observe(text, 'keydown', delayedResize)
  // text.focus()
  // text.select()
  resize()
}

另外监听移动端input textarea事件

input.addEventListener('input', () => {
  // 可搭配上面的resize方法食用 可监听到联想输入之类的
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容