textarea文域高度自適應

textarea高度自適應

<textarea>文本域高度隨內容自動變化，不會出現滾動條，能夠有多種方法，除了用js動態設置它的高度值之外還有其它更簡單的方法。

能夠用div標籤模擬textarea，將div的contenteditable屬性設置成true，使內容可編輯，達到高度隨內容變化的目的。contenteditable的兼容性很好。

<div contenteditable='true'></div>

還有一種方法，利用兄弟節點撐開父級高度，設置textarea高度爲100%便可。

<style>
    .wrap { position: relative; }
    textarea { position: absolute; top: 0; left: 0; height: 100%; }
</style>

<div class="wrap">
    <pre><span></span><br></pre>
    <textarea name="" id="" ></textarea>
</div>

document.querySelecotr('textarea').oninput = function () {
    document.querySelector('pre span').innerHTML = this.value;
}