簡單實現一個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的值，代碼中也有體現。

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

查看源碼：源碼