摘要:今天的任務(wù)是生成一個(gè)高度自適應(yīng)的而且也可以設(shè)置最小高度和最大高度。但是有一個(gè)問題當(dāng)想從大變到小的時(shí)候,這個(gè)不能反映文字的實(shí)際高度,所以這個(gè)方法不是很適合。高度跟著文字的多少走的,而且不需要?jiǎng)赢嫛S玫姆绞缴梢粋€(gè)無用的用來計(jì)算的高度。
今天的任務(wù)是生成一個(gè)高度自適應(yīng)的textarea,而且也可以設(shè)置最小高度和最大高度。
最簡(jiǎn)單的方法
textarea的屬性是overflow:auto;那么如果內(nèi)容的高度大于textarea本身的高度時(shí),可以把textarea的高度設(shè)置成scrollHeight
let textarea = document.getElementById("textarea"); textarea.style.height = textarea.scrollHeight + "px";
這種方法能解決textarea從小變到大的過程。但是有一個(gè)問題,當(dāng)想從大變到小的時(shí)候,這個(gè)scrollHeight不能反映文字的實(shí)際高度,所以這個(gè)方法不是很適合。
高度跟著文字的多少走的,而且不需要?jiǎng)赢嫛?/strong>
如果不需要設(shè)置最小高度,一直是跟著文本的高度走的,可以采用這種方式:
auto-textarea: stackoverflow
這種方式的主要是先把textarea的height設(shè)置成auto,然后再設(shè)置:
textarea.style.height = "auto"; textarea.style.height = textarea.scrollHeight + "px";
但是這個(gè)設(shè)置還有一個(gè)問題,如果變化高度時(shí),想要有一個(gè)動(dòng)畫過程,這樣設(shè)置就不行。
ant.design用的方式
生成一個(gè)無用的textarea,用來計(jì)算textarea的高度。
let hiddenTextarea; const factors = [ "letter-spacing", "line-height", "padding-top", "padding-bottom", "font-family", "font-weight", "font-size", "text-rendering", "text-transform", "width", "text-indent", "padding-left", "padding-right", "border-width", "box-sizing" ]; export default function calculateNodeHeight(utext){ // debugger; if (!hiddenTextarea) { hiddenTextarea = document.createElement("textarea"); document.body.appendChild(hiddenTextarea); } let cssStyle = window.getComputedStyle(utext); let styleSize = factors.map(n=>{ return n + ":" + cssStyle.getPropertyValue(n) }).join(";") hiddenTextarea.setAttribute("style", styleSize); hiddenTextarea.value = utext.value || utext.placeholder || ""; let height = hiddenTextarea.scrollHeight; hiddenTextarea.value = ""; return { scrollHeight: height } }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/86939.html
摘要:但是現(xiàn)在產(chǎn)品經(jīng)理說了需要這個(gè)文本框可以根據(jù)用戶輸入內(nèi)容自適應(yīng)其高度。想法很簡(jiǎn)單,當(dāng)用戶輸入的文本超過了文本框自身高度時(shí)不是會(huì)出現(xiàn)滾動(dòng)條嘛,那么自然而然就能想到這個(gè)屬性。就應(yīng)該是用戶輸入文本的真實(shí)高度,至少超過文本框既定高度時(shí)是這樣。 文本框是很常見的輸入控件,我相信只要寫過表單的肯定接觸過 textarea 這個(gè)元素。 OK。但是現(xiàn)在產(chǎn)品經(jīng)理說了:需要這個(gè)文本框可以根據(jù)用戶輸入內(nèi)容自適...
摘要:但是現(xiàn)在產(chǎn)品經(jīng)理說了需要這個(gè)文本框可以根據(jù)用戶輸入內(nèi)容自適應(yīng)其高度。想法很簡(jiǎn)單,當(dāng)用戶輸入的文本超過了文本框自身高度時(shí)不是會(huì)出現(xiàn)滾動(dòng)條嘛,那么自然而然就能想到這個(gè)屬性。就應(yīng)該是用戶輸入文本的真實(shí)高度,至少超過文本框既定高度時(shí)是這樣。 文本框是很常見的輸入控件,我相信只要寫過表單的肯定接觸過 textarea 這個(gè)元素。 OK。但是現(xiàn)在產(chǎn)品經(jīng)理說了:需要這個(gè)文本框可以根據(jù)用戶輸入內(nèi)容自適...
摘要:使用該組件注意一個(gè)問題就是不要在可視化區(qū)域的節(jié)點(diǎn)上使用樣式,否則會(huì)出現(xiàn)當(dāng)鼠標(biāo)焦點(diǎn)小時(shí)光標(biāo)和小水滴無法消失的情況地址項(xiàng)目地址參考鏈接模擬文本域輕松實(shí)現(xiàn)高度自適應(yīng)如何讓元素只能輸入純文本 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng) 開發(fā)過程中由于需要在發(fā)送消息的時(shí)候需要有一個(gè)可以高度自適應(yīng)的文本域,一開始是使用textarea并搭配auto-size...
摘要:使用該組件注意一個(gè)問題就是不要在可視化區(qū)域的節(jié)點(diǎn)上使用樣式,否則會(huì)出現(xiàn)當(dāng)鼠標(biāo)焦點(diǎn)小時(shí)光標(biāo)和小水滴無法消失的情況地址項(xiàng)目地址參考鏈接模擬文本域輕松實(shí)現(xiàn)高度自適應(yīng)如何讓元素只能輸入純文本 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng) 開發(fā)過程中由于需要在發(fā)送消息的時(shí)候需要有一個(gè)可以高度自適應(yīng)的文本域,一開始是使用textarea并搭配auto-size...
閱讀 2429·2023-04-26 00:46
閱讀 587·2023-04-25 21:36
閱讀 733·2021-11-24 10:19
閱讀 2278·2021-11-23 09:51
閱讀 1024·2021-10-21 09:39
閱讀 837·2021-09-22 10:02
閱讀 1673·2021-09-03 10:29
閱讀 2698·2019-08-30 15:53