<abbr id="esecs"></abbr>

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

lanffy 發布于2019-08-23 11:39 / 2544人閱讀

摘要：自適應的實現方法很多，原理其實比較簡單監聽的或者鍵盤事件，獲取元素的重置元素的高度。看代碼原理很簡單，獲取到元素的即元素真實高度與元素的行高求商，四舍五入。如果設置的話，需要減去上下的值，代碼中也有體現。有問題歡迎交流，最后附上源碼。

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的值，代碼中也有體現。

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

查看源碼：源碼

云服務器 GPU云服務器 textarea自適應高度高度自適應 iframe高度自適應 iframe自適應高度

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97272.html

編寫自適應高度的 textarea

摘要：但是現在產品經理說了需要這個文本框可以根據用戶輸入內容自適應其高度。想法很簡單，當用戶輸入的文本超過了文本框自身高度時不是會出現滾動條嘛，那么自然而然就能想到這個屬性。就應該是用戶輸入文本的真實高度，至少超過文本框既定高度時是這樣。文本框是很常見的輸入控件，我相信只要寫過表單的肯定接觸過 textarea 這個元素。 OK。但是現在產品經理說了：需要這個文本框可以根據用戶輸入內容自適...

only_do 2019-08-23 15:27 評論0 收藏0
編寫自適應高度的 textarea

摘要：但是現在產品經理說了需要這個文本框可以根據用戶輸入內容自適應其高度。想法很簡單，當用戶輸入的文本超過了文本框自身高度時不是會出現滾動條嘛，那么自然而然就能想到這個屬性。就應該是用戶輸入文本的真實高度，至少超過文本框既定高度時是這樣。文本框是很常見的輸入控件，我相信只要寫過表單的肯定接觸過 textarea 這個元素。 OK。但是現在產品經理說了：需要這個文本框可以根據用戶輸入內容自適...

wenzi 2019-08-02 14:19 評論0 收藏0
使用contenteditable+div模擬textarea文本域實現高度自適應

摘要：使用該組件注意一個問題就是不要在可視化區域的節點上使用樣式，否則會出現當鼠標焦點小時光標和小水滴無法消失的情況地址項目地址參考鏈接模擬文本域輕松實現高度自適應如何讓元素只能輸入純文本使用contenteditable+div模擬textarea文本域實現高度自適應開發過程中由于需要在發送消息的時候需要有一個可以高度自適應的文本域，一開始是使用textarea并搭配auto-size...

seasonley 2019-08-01 17:53 評論0 收藏0
使用contenteditable+div模擬textarea文本域實現高度自適應

摘要：使用該組件注意一個問題就是不要在可視化區域的節點上使用樣式，否則會出現當鼠標焦點小時光標和小水滴無法消失的情況地址項目地址參考鏈接模擬文本域輕松實現高度自適應如何讓元素只能輸入純文本使用contenteditable+div模擬textarea文本域實現高度自適應開發過程中由于需要在發送消息的時候需要有一個可以高度自適應的文本域，一開始是使用textarea并搭配auto-size...

Olivia 2019-08-29 13:42 評論0 收藏0