• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Größe eines Textfeldes an dessen Inhalt anpassen

J

joergi

New member
Hi,

auf der Suche, ein Textfeld an der Größe des Inhaltes anzupassen, bin ich unter
Gre eines Textfeldes an dessen Inhalt anpassen
auf einen interessanten script gestoßen. Diesen habe ich nun leicht abgeändert und er funktioniert auch soweit. Leider gibt es zwei Einschränkungen, die ich als Laie nicht hinbekomme:
1. Das Textfeld erweitert sich teilweise erst um eine weitere Zeile, wenn schon einige Wörter in dieser geschrieben wurden. Es sollte sich jedoch schon beim ersten Wort in einer Zeile erweitern.
2. Wie könnte ich diese Funktion auch in ein zweites oder drittes Textfeld einfügen?

Könnt Ihr mir helfen? Ich wäre für Eure Hilfe sehr dankbar :icon6:



HTML: 
<html>
<head>
<script type="text/javascript">
function addZeile(eingabe) {
     var Inhalt = eingabe.value;

    var geteilt = Inhalt.split('\n');
    var Abstand = 0;
    var altPos = -1;
    for(var Zaehler = 0; Zaehler < geteilt.length; Zaehler++) {
        var Position = geteilt[Zaehler].search(/ |-/);
        while(Position != altPos) {
            if(parseInt(Position / eingabe.cols) != parseInt(altPos / eingabe.cols))
                Abstand += Math.abs(altPos%eingabe.cols - (eingabe.cols-1));
            altPos = Position;
            Position++;
            Position = geteilt[Zaehler].slice(Position).search(/ |-/)+Position;
        }
        Abstand += Math.abs((geteilt[Zaehler].length-1) % eingabe.cols - eingabe.cols) + geteilt[Zaehler].length-1;
    }

    Abstand = Abstand / eingabe.cols * 20 + 29;
    if(Abstand > 200)
        Abstand = 200;
    eingabe.style.height = Abstand+'px';    
}
</script>
</head>
<body onload="addZeile(document.getElementById('eingabe'))">
    <form action="">
        <textarea id="eingabe" onkeydown="setTimeout('addZeile(document.getElementById(\'eingabe\'))',10)"
        style="font-size:10pt; font-family:monospace;" cols="120" rows="2">Ihr Text</textarea>
    </form>
</body>
</html>
 
Das Skript ist auch suboptimal geschrieben...
Code: 
<DOCTYPE html>
<html>
<head>
<title>Seitentitel</title>
<script type="text/javascript">
function checkSize(textarea){
	var offset = 0;
	while (textarea.scrollHeight > textarea.clientHeight){
		textarea.style.height = (textarea.scrollHeight + offset) + "px";
		offset += 10;
	}
}
</script>
</head>
<body>
    <form>
        <textarea oninput="checkSize(this)" cols="120" rows="2">Ihr Text</textarea>
        <textarea oninput="checkSize(this)" cols="120" rows="2">Ihr Text</textarea>
    </form>
</body>
</html>
 
Hi kkapsner,

Supääärr. Klappt einwandfrei. Sogar mit verschiedenen Schriftgrößen. Jetzt gibt es aber noch ein kleines Problem: Wenn das Textfeld einen vordifinierten längeren Text enthält, werden nach dem Aufruf des Scriptes nur die ersten Zeilen des Textfeldes angezeigt. Nur wenn ich in das Textfeld schreibe, werden alle Zeilen angezeigt, die für den Text benötigt werden. Wahrscheinlich kann man das Problem mit "onload" lösen. Aber das funktioniert leider nicht. Was mache ich falsch oder liege ich komplett falsch :confused: Hier mein leicht geänderter Code, der leider so nicht funktioniert:

HTML: 
<DOCTYPE html>
<html>
<head>
<title>Seitentitel</title>
<script type="text/javascript">
function checkSize(textarea){
	var offset = 0;
	while (textarea.scrollHeight > textarea.clientHeight){
		textarea.style.height = (textarea.scrollHeight + offset) + "px";
		offset += 1;
	}
}
</script>
</head>
<body onload = "checkSize(this)">
    <form>
        <textarea style="font-size:10pt;" oninput="checkSize(this)" cols="50" rows="2">Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text</textarea>
        <br><br>
        
        <textarea style="font-size:15pt;" oninput="checkSize(this)" cols="30" rows="2">Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text</textarea>
    </form>
</body>
</html>
 
Dein Ansatz mit onload ist schon richtig, aber das "this" ist hierbei das window und kein textarea. Du musst also im onload durch die gewünschten <textarea>s durchiterieren und auf jedem die funktion checkSize ausführen. Dabei könnten man auch gleich die Eventlistener registrieren und müsste dann nicht im HTML die Events definieren:
Code: 
<!DOCTYPE html>
<html>
<head>
<title>Seitentitel</title>
<script type="text/javascript">
window.addEventListener("load", function(){
	function checkSize(){
		var offset = 0;
		while (this.scrollHeight > this.clientHeight){
			this.style.height = (this.scrollHeight + offset) + "px";
			offset += 1;
		}
	}
	
	[].forEach.call(document.getElementsByTagName("textarea"), function(textarea){
		checkSize.call(textarea);
		textarea.addEventListener("input", checkSize, false);
	});
}, false);
</script>
</head>
<body>
    <form>
        <textarea style="font-size:10pt;" cols="50" rows="2">Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text</textarea>
        <br><br>
        
        <textarea style="font-size:15pt;" cols="30" rows="2">Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text Ihr Text</textarea>
    </form>
</body>
</html>

PS: Oben ist meine DocType falsch...
 
Zuletzt bearbeitet:
Hi kkapsner,

wow, man merkt, das ich wirklich ein Laie bin. Der Code ist wirklich kurz und übersichtlich. Leider scheint sich aber im Script ein Fehler eingeschlichen zu haben. Der Parser meldet einen Fehler in Zeile 7 (Das Objekt unterstützt die Eigenschaft oder Methode "addEventListener" nicht) !!!
 
Hi kkapsner,

Jau, jetzt klappt es perfekt. Lag am fehlenden Codeschnipsel. Arbeite mit Firefox 36.0.4 :icon6::icon6::icon6:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben