資訊專欄INFORMATION COLUMN
摘要：自適應的實現(xiàn)方法很多，原理其實比較簡單監(jiān)聽的或者鍵盤事件，獲取元素的重置元素的高度?？创a原理很簡單，獲取到元素的即元素真實高度與元素的行高求商，四舍五入。如果設置的話，需要減去上下的值，代碼中也有體現(xiàn)。有問題歡迎交流，最后附上源碼。
textarea自適應的實現(xiàn)方法很多，原理其實比較簡單：監(jiān)聽textarea的input或者鍵盤事件，獲取元素的scrollHeight,重置textarea元素的高度。
預覽地址：textarea
我們知道textarea有個rows的屬性，改變rows的值可以改變textarea的高度，至于怎么改變不做探究, 所以思路就來了：當文本輸入的時候，動態(tài)給textarea賦值rows, rows自會導致textarea的高度改變
接下來，問題就來了，如何動態(tài)獲取rows的值？首先我們先看一下textarea與rows, cols以及瀏覽器的的關系是怎樣的？可以參考張大神的文章HTML textarea cols,rows屬性和寬度高度關系研究
猜測你已經(jīng)看完了，大概得出一個結論就是：textarea高度 ≈ lineHeight * rows. 這樣思路就更清晰了?？创a
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的值，代碼中也有體現(xiàn)。
有問題歡迎交流，最后附上源碼。
查看源碼：源碼
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97272.html
摘要：但是現(xiàn)在產(chǎn)品經(jīng)理說了需要這個文本框可以根據(jù)用戶輸入內(nèi)容自適應其高度。想法很簡單，當用戶輸入的文本超過了文本框自身高度時不是會出現(xiàn)滾動條嘛，那么自然而然就能想到這個屬性。就應該是用戶輸入文本的真實高度，至少超過文本框既定高度時是這樣。 文本框是很常見的輸入控件，我相信只要寫過表單的肯定接觸過 textarea 這個元素。 OK。但是現(xiàn)在產(chǎn)品經(jīng)理說了：需要這個文本框可以根據(jù)用戶輸入內(nèi)容自適...
摘要：但是現(xiàn)在產(chǎn)品經(jīng)理說了需要這個文本框可以根據(jù)用戶輸入內(nèi)容自適應其高度。想法很簡單，當用戶輸入的文本超過了文本框自身高度時不是會出現(xiàn)滾動條嘛，那么自然而然就能想到這個屬性。就應該是用戶輸入文本的真實高度，至少超過文本框既定高度時是這樣。 文本框是很常見的輸入控件，我相信只要寫過表單的肯定接觸過 textarea 這個元素。 OK。但是現(xiàn)在產(chǎn)品經(jīng)理說了：需要這個文本框可以根據(jù)用戶輸入內(nèi)容自適...
摘要：使用該組件注意一個問題就是不要在可視化區(qū)域的節(jié)點上使用樣式，否則會出現(xiàn)當鼠標焦點小時光標和小水滴無法消失的情況地址項目地址參考鏈接模擬文本域輕松實現(xiàn)高度自適應如何讓元素只能輸入純文本 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度自適應 開發(fā)過程中由于需要在發(fā)送消息的時候需要有一個可以高度自適應的文本域，一開始是使用textarea并搭配auto-size...
摘要：使用該組件注意一個問題就是不要在可視化區(qū)域的節(jié)點上使用樣式，否則會出現(xiàn)當鼠標焦點小時光標和小水滴無法消失的情況地址項目地址參考鏈接模擬文本域輕松實現(xiàn)高度自適應如何讓元素只能輸入純文本 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度自適應 開發(fā)過程中由于需要在發(fā)送消息的時候需要有一個可以高度自適應的文本域，一開始是使用textarea并搭配auto-size...
閱讀 3056·2021-11-22 12:06
閱讀 657·2021-09-03 10:29
閱讀 6632·2021-09-02 09:52
閱讀 2043·2019-08-30 15:52
閱讀 3447·2019-08-29 16:39
閱讀 1216·2019-08-29 15:35
閱讀 2096·2019-08-29 15:17
閱讀 1450·2019-08-29 11:17
