textarea文域高度自適應

zhaoqing發表於2019-02-16

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;
}

相關文章