簡單實現一個textarea自適應高度

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