国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

創(chuàng)建一個(gè)高度自適應(yīng)的textarea

BLUE / 1506人閱讀

摘要:今天的任務(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

相關(guān)文章

  • 編寫適應(yīng)高度 textarea

    摘要:但是現(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)容自適...

    only_do 評(píng)論0 收藏0
  • 編寫適應(yīng)高度 textarea

    摘要:但是現(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)容自適...

    wenzi 評(píng)論0 收藏0
  • 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度適應(yīng)

    摘要:使用該組件注意一個(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...

    seasonley 評(píng)論0 收藏0
  • 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度適應(yīng)

    摘要:使用該組件注意一個(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...

    Olivia 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<