建立一個高度自適應的textarea

今天的任務是生成一個高度自適應的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
    }

}