textarea自適應的實現方法很多，原理其實比較簡單：監聽textarea的input或者鍵盤事件，獲取元素的scrollHeight,重置textarea元素的高度。

預覽地址：textarea

我們知道textarea有個rows的屬性，改變rows的值可以改變textarea的高度，至於怎麼改變不做探究, 所以思路就來了：當文字輸入的時候，動態給textarea賦值rows, rows自會導致textarea的高度改變

接下來，問題就來了，如何動態獲取rows的值？首先我們先看一下textarea與rows, cols以及瀏覽器的的關係是怎樣的？可以參考張大神的文章HTML textarea cols,rows屬性和寬度高度關係研究

猜測你已經看完了，大概得出一個結論就是：textarea高度 ≈ lineHeight * rows. 這樣思路就更清晰了。看程式碼

resizeHeight(elem, style) {
  elem.removeAttribute('rows')
  elem.style.height = 'auto'
  const { scrollHeight } = elem
  const { lineHeight, paddingTop, paddingBottom } = style
  let rowsNum = Math.round((scrollHeight - paddingTop - paddingBottom) / lineHeight)
  elem.setAttribute('rows', rowsNum)
},
 

原理很簡單，獲取到元素的scrollHeight(即元素真實高度), 與元素的行高求商，四捨五入。有同學說，直接把scrollHeight賦值給元素不就行了，這麼麻煩，說的好有道理。是不是這樣

const { scrollHeight } = elem
elem.style.height = `${scrollHeight}px`

貌似好像也行呀，pc站好像沒問題，不過筆者在移動端測試的時候刪除的時候，貌似有點小問題。換成改成獲取rows的方法就好了。

如果textarea設定padding的話，需要減去上下padding的值，程式碼中也有體現。

有問題歡迎交流，最後附上原始碼。

檢視原始碼：原始碼

來源：https://segmentfault.com/a/1190000016234169