javascript - Bagaimana untuk mendapatkan bilangan baris yang dibalut secara automatik dalam textarea dalam js?

Question

Untuk memasukkan kandungan dalam kawasan teks, lalai ialah satu baris Apabila terlalu banyak kandungan dimasukkan, baris itu akan secara automatik membalut dan ketinggian akan meningkat?

Answer 1

1, gunakan bayang

<p style="height:0; overflow:hidden;">
    <p class="shadow"></p>
</p>
<textarea style="overflow:hidden;"></textarea>

<script>
    textarea.addEventListener('input', function(e) {
        shadow.innerHTML = this.value.replace(/\</g, '<').replace(/\>/g, '>');
        this.height = shadow.clientHeight + 'px';
    });
</script>

2, gunakan atribut boleh diedit kandungan

<p contenteditable="true">这里的高度会随内容自动扩展</p>

3, jika menggunakan

textarea.style.height = textarea.scrollHeight + 'px';

Ketinggian juga boleh dilaraskan dalam bentuk ini, tetapi bar skrol akan berkelip apabila menukar baris, dan ketinggian hanya akan meningkat tetapi tidak berkurangan, yang merupakan pengalaman menulis yang paling teruk

Answer 2

Berikan textarea acara oninput

<textarea id="text"></textarea>
document.getElementById('text').style.height = document.getElementById('text').scrollHeight + 'px'

Serupa dengan ini

Answer 3

http://stackoverflow.com/ques...

Answer 4

Jumlah ketinggian kawasan teks (gunakan elemen jQ.height(), jika ia adalah js asli, sila semak BIF manual) / ketinggian garisan yang anda tetapkan