本日的使命是天生一个高度自适应的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
    }

}