textarea文本框自适应高度

把所有问题都自己code一遍，那就不是问题 🐮

直接先上代码

html部分 🍎

<div>
    <pre></pre>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</div>

css部分 🍇

div{
  position: relative;
  width: 30%;
  min-height: 100px;
  padding-top: 15px;  /*防止抖动*/
  box-sizing: border-box;
}
textarea{
  position: absolute;
  width: 100%;
  height: 100%;
  resize: none;
  left: 0;
  top: 0;
  overflow: hidden;
}
pre{
  display: block;
  visibility: hidden;
}

js部分 🌵

let text = document.querySelector('textarea')
let pre = document.querySelector('pre')
text.onkeyup = function(){
  let value = this.value
  pre.innerText = value
}

实现思路

使用子绝父相让textarea相对于父元素div定位，用户输入的内容，利用keyup事件，同步到pre中，让pre的内容高度把div撑开，使其自适应高度。

pre标签设置visibility: hidden;,不可见，但继续占有位置。给div设置 padding-top: 15px;box-sizing: border-box;，目的是把pre标签顶开距离，因为输入同步到pre时，会改变其高度，会有抖动现象。

blog：gauharchan.github.io/，这是我博客地址，让我们一起在前端道路上持续发胖吧，☺