摘要:高度自適應文本域高度隨內容自動變化,不會出現滾動條,可以有多種方法,除了用動態設置它的高度值以外還有其它更簡單的方法。還有一種方法,利用兄弟節點撐開父級高度,設置高度為即可。
textarea高度自適應
文本域高度隨內容自動變化,不會出現滾動條,可以有多種方法,除了用js動態設置它的高度值以外還有其它更簡單的方法。
可以用div標簽模擬textarea,將div的contenteditable屬性設置成true,使內容可編輯,達到高度隨內容變化的目的。contenteditable的兼容性很好。
還有一種方法,利用兄弟節點撐開父級高度,設置textarea高度為100%即可。
document.querySelecotr("textarea").oninput = function () { document.querySelector("pre span").innerHTML = this.value; }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/107722.html
摘要:今天的任務是生成一個高度自適應的而且也可以設置最小高度和最大高度。但是有一個問題當想從大變到小的時候,這個不能反映文字的實際高度,所以這個方法不是很適合。高度跟著文字的多少走的,而且不需要動畫。用的方式生成一個無用的用來計算的高度。 今天的任務是生成一個高度自適應的textarea,而且也可以設置最小高度和最大高度。最簡單的方法textarea的屬性是overflow:auto;那么如...
摘要:但是現在產品經理說了需要這個文本框可以根據用戶輸入內容自適應其高度。想法很簡單,當用戶輸入的文本超過了文本框自身高度時不是會出現滾動條嘛,那么自然而然就能想到這個屬性。就應該是用戶輸入文本的真實高度,至少超過文本框既定高度時是這樣。 文本框是很常見的輸入控件,我相信只要寫過表單的肯定接觸過 textarea 這個元素。 OK。但是現在產品經理說了:需要這個文本框可以根據用戶輸入內容自適...
摘要:但是現在產品經理說了需要這個文本框可以根據用戶輸入內容自適應其高度。想法很簡單,當用戶輸入的文本超過了文本框自身高度時不是會出現滾動條嘛,那么自然而然就能想到這個屬性。就應該是用戶輸入文本的真實高度,至少超過文本框既定高度時是這樣。 文本框是很常見的輸入控件,我相信只要寫過表單的肯定接觸過 textarea 這個元素。 OK。但是現在產品經理說了:需要這個文本框可以根據用戶輸入內容自適...
閱讀 1626·2021-09-02 09:55
閱讀 1092·2019-08-30 13:19
閱讀 1392·2019-08-26 13:51
閱讀 1445·2019-08-26 13:49
閱讀 2372·2019-08-26 12:13
閱讀 452·2019-08-26 11:52
閱讀 1898·2019-08-26 10:58
閱讀 3084·2019-08-26 10:19