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：gauhar.gitee.io，這是我博客地址，讓咱們一塊兒在前端道路上持續發胖吧，☺