"textarea" html Feld mitwachsen?

2 Antworten

JulianOnFire
14.12.2023, 09:55 
<textarea class="form-control" name="Adresse" rows="auto">{if $pdf}{$values.Adresse|nl2br}{/if}</textarea>

Du kannst auch die Mindesthöhe des Textarea-Felds definieren. Das bedeutet, dass das Textarea-Feld immer mindestens so hoch sein wird, wie der angegebene Wert.

<textarea class="form-control" name="Adresse" rows="auto" min-height="50">{if $pdf}{$values.Adresse|nl2br}{/if}</textarea>
Woher ich das weiß:Hobby – Programmierer
maetin944 
Fragesteller
 14.12.2023, 10:01

aber so ein Scrollbalken kommt trozdem

0
JulianOnFire  14.12.2023, 10:20
@maetin944

wenn du den text auf der Webseite selbst eingeben willst, würde es so gehen ;

<!DOCTYPE html>
<html>
<head>
    <style>
        textarea.auto-expand {
            overflow-y: hidden; 
            resize: none; 
            min-height: 50px; 
        }
    </style>
</head>
<body>


<textarea class="auto-expand" id="expanding-textarea"></textarea>


<script>
    document.getElementById('expanding-textarea').addEventListener('input', function() {
        this.style.height = 'auto'; 
        this.style.height = (this.scrollHeight) + 'px'; 
    });
</script>


</body>
</html>

wenn du den text vorab mitgeben willst dann so:

<!DOCTYPE html>
<html>
<head>
    <style>
        textarea.auto-expand {
            overflow-y: hidden; 
            resize: none; 
            min-height: 50px; 
        }
    </style>
</head>
<body>


<textarea class="auto-expand" id="expanding-textarea">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</textarea>


<script>
    function adjustTextareaHeight(textarea) {
        textarea.style.height = 'auto';
        textarea.style.height = textarea.scrollHeight + 'px';
    }


    const textarea = document.getElementById('expanding-textarea');
    adjustTextareaHeight(textarea);


    textarea.addEventListener('input', function() {
        adjustTextareaHeight(this);
    });
</script>


</body>
</html>
0
SirGeiler
22.03.2024, 10:03

Ich habe für diesen Zweck immer Autosize (stand-alone) verwendet.
Woher ich das weiß:Berufserfahrung – IT Autodidakt & DAU-Proofed als PC-Flittchen