最简单的 textarea 高度自适应办法

问题描述

今天在项目中遇到一个需求是用户输入框的高度随着字数大小自动变化。

问题解决

• 解决思路
  通过监听 input 时间将 textarea 高度改成滑动高度，也就是将 scrollHeight 属性值复制给 textarea 的高度。

• 代码案例

var textarea = document.getElementsByTagName("textarea");
        for(var i=0;i<textarea.length;i++){
          textarea[i].style.height = 'auto';
          textarea[i].scrollTop = 0; //防抖动
          textarea[i].style.height = textarea[i].scrollHeight + 'px';
          textarea[i].addEventListener('input',function (e) {
                  e.target.style.height = 'auto';
                  e.target.scrollTop = 0; //防抖动
                  e.target.style.height = e.target.scrollHeight + 'px';
            })
        }

总结

1. 以上是监听所有的 textarea，如果只需要监听一个 textarea，可以通过 id 获取 DOM 对象，如果是 React 中或者 Vue 中，则使用 ref 属性获取 DOM 对象。
2. 在 React 中需要在 componentDidMount 生命周期中调用以上方法。
3. 在 Vue 中需要在 mounted 生命周期中调用以上方法。
4. 在 Vue 中需要注意的是，元素如果设置了 v-if 也就是没有显示出来，那么 DOM 对象肯定也是获取不到的，这时候如果想要获取到 DOM 对象又不能少了判断，可以使用 v-show。
5. 初始化设置高度的时候，有可能有误，这是因为可能页面逻辑复杂（比如有递归或者循环），延时导致值没有赋上去，在 for 循环外层加个 setTimeout 定时器即可。

var textarea = document.getElementsByTagName("textarea");
setTimeout(()=>{
 for(var i=0;i<textarea.length;i++){
          textarea[i].style.height = 'auto';
          textarea[i].scrollTop = 0; //防抖动
           //有可能这个初始化高度赋值没有赋上去
          textarea[i].style.height = textarea[i].scrollHeight + 'px';     
          textarea[i].addEventListener('input',function (e) {
                  e.target.style.height = 'auto';
                  e.target.scrollTop = 0; //防抖动
                  e.target.style.height = e.target.scrollHeight + 'px';
            })
        }
},200)