textarea文域高度自適應

2023年2月10日 73次阅读 来源: zhaoqing

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;
}
    原文作者：zhaoqing
    原文地址: https://segmentfault.com/a/1190000014675013
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞