javascript - Comment obtenir le nombre de lignes automatiquement renvoyées dans une zone de texte en JS?

Question

Pour saisir du contenu dans une zone de texte, la valeur par défaut est une ligne. Lorsque trop de contenu est saisi, la ligne sera automatiquement renvoyée à la ligne et la hauteur augmentera ?

Answer 1

1, utilise l'ombre

<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, utilisez l'attribut contenteditable

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

3, si vous utilisez

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

La hauteur peut également être ajustée sous cette forme, mais la barre de défilement clignotera lors du changement de ligne, et la hauteur ne fera qu'augmenter mais pas diminuer, ce qui est la pire expérience d'écriture

.

Answer 2

Donnez à la zone de texte un événement oninput

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

Similaire à ça

Answer 3

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

Answer 4

La hauteur totale de la zone de texte (utilisez element.height() de jQ, s'il s'agit de js natif, veuillez vérifier le BIF du manuel) / la hauteur de ligne que vous avez définie