創建一個高度自適應的textarea

BLUE 發布于2019-08-21 11:37 / 1495人閱讀

摘要：今天的任務是生成一個高度自適應的而且也可以設置最小高度和最大高度。但是有一個問題當想從大變到小的時候，這個不能反映文字的實際高度，所以這個方法不是很適合。高度跟著文字的多少走的，而且不需要動畫。用的方式生成一個無用的用來計算的高度。

今天的任務是生成一個高度自適應的textarea,而且也可以設置最小高度和最大高度。
最簡單的方法
textarea的屬性是overflow:auto;那么如果內容的高度大于textarea本身的高度時，可以把textarea的高度設置成scrollHeight

let textarea = document.getElementById("textarea");
textarea.style.height = textarea.scrollHeight + "px";

這種方法能解決textarea從小變到大的過程。但是有一個問題,當想從大變到小的時候，這個scrollHeight不能反映文字的實際高度，所以這個方法不是很適合。

高度跟著文字的多少走的，而且不需要動畫。
如果不需要設置最小高度，一直是跟著文本的高度走的，可以采用這種方式：
auto-textarea: stackoverflow
這種方式的主要是先把textarea的height設置成auto,然后再設置：

textarea.style.height = "auto";
textarea.style.height = textarea.scrollHeight + "px";

但是這個設置還有一個問題,如果變化高度時，想要有一個動畫過程，這樣設置就不行。

ant.design用的方式
生成一個無用的textarea,用來計算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
    }

}

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86939.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