Existe-t-il un moyen de faire en sorte qu'une zone de texte s'adapte à son contenu sans utiliser PHP ou JavaScript ?

Question

Je remplis une zone de texte avec du contenu que l'utilisateur peut modifier.

Est-il possible de l'étirer pour l'adapter au contenu à l'aide de CSS (comme overflow:show pour un div) ?

Answer 1

Une seule ligne

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

Answer 2

Pas vraiment. Cela se fait normalement à l'aide de javascript.

il y a une bonne discussion sur les moyens de faire cela ici...

Autorisation de la zone de texte à l'aide de Prototype

Answer 3

Voici une fonction qui fonctionne avec jQuery (pour la hauteur uniquement, pas la largeur) :

function setHeight(jq_in){
    jq_in.each(function(index, elem){
        // This line will work with pure Javascript (taken from NicB's answer):
        elem.style.height = elem.scrollHeight+'px'; 
    });
}
setHeight($('<put selector here>'));

Note : L'op a demandé une solution qui n'utilise pas Javascript, mais cela devrait être utile à beaucoup de gens qui rencontrent cette question.

Answer 4

C'est une solution très simple, mais elle fonctionne pour moi :

<!--TEXT-AREA-->
<textarea id="textBox1" name="content" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');">Hello World</textarea>

<!--JAVASCRIPT-->
<script type="text/javascript">
function setHeight(fieldId){
    document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
}
setHeight('textBox1');
</script>

Answer 5

Une autre solution simple pour le contrôle dynamique des zones de texte.

<!--JAVASCRIPT-->
<script type="text/javascript">
$('textarea').on('input', function () {
            this.style.height = "";
            this.style.height = this.scrollHeight + "px";
 });
</script>