• 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,

vor einigen Monaten habe ich schon einmal die Frage gestellt, wie sich die Höhe des Textfeldes automatisch am Inhalt anpassen kann. Dabei kam dank Eurer Hilfe der untenstehende script heraus, der auch einwandfrei funktioniert. Nun würde ich auch gerne den umgekehrten Weg gehen d.h. wird eine Zeile z.B. mit der "back" Taste gelöscht, soll sich auch die Höhe des Textfeldes wieder verringern. Könnt Ihr mir helfen? Vielen Dank im voraus :icon6:


HTML: 
<!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>
 
Hi,

danke für die Tips. Wußte wirklich nicht, das es sowas gibt. Habe einfach verkehrt gesucht :rolleyes:

Ich habe jetzt mal ein bißchen herumexperimentiert und den untenstehenden Script geschrieben. Er funktioniert einwandfrei. Aber mich stört, das man immer eine unterste leere Zeile in der Textbox hat. Egal wieviel Zeilen man auch vollschreibt. Gibt es eine Möglichkeit, diese Leerzeile auszuschließen? Es gibt zwar auf der Seite des Programmierers ein Beispiel, wo dieses Phänomen nicht auftritt. Aber ich weiß einfach nicht, wie er das hinbekommen hat :(


HTML: 
		<style>
			textarea {
				border:2px solid #ccc;
				width: 500px;
				font-size: 12px;
			}
		</style>
		<script src='jquery-2.0.0.min.js'></script>
		<script src='jquery.autosize.js'></script>
		<script>
			$(function(){
				$('.normal').autosize();
			});			
		</script>
	<body>
		<textarea rows='1' class='normal'>Box 1</textarea>
		<br><br>
		<textarea rows='2' class='normal'>Box 2</textarea>
	</body>
</html>
 
Ich hab es mal mit diesem Code getestet:
HTML: 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>autosize</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
	<script src="/javascript/jquery-autosize.js"></script> <!-- Version v1.16.5  -->
	<script>
		$(document).ready(function() { $('textarea').autosize(); });
	</script>
	<style scoped>
		textarea {
			border:2px solid #ccc;
			width: 500px;
			font-size: 12px;
		}
	</style>
</head>
<body>
	<textarea rows="1">Box 1</textarea>
	<br><br>
	<textarea rows="1">Box 2</textarea>
</body>
</html>

Im Firefox hast du 2 Zeilen, im IE 11 + Opera + Chrome beispielsweise nur wie gewünscht eine. Wieder mal ein Fall, wo ich auf den Firefox direkt wieder fluchen könnte. Aber Julian ist leider nicht mehr hier, mit dem hab ich mich da immer gern gekabbelt, weil er immer versucht hat, das Falschverhalten des Firefox zu entschuldigen/erklären auch wenn alle anderen Browser es anders gemacht haben, das war witzig :)

Müsstest du mal mit dem CSS spielen, ob du das speziell für den FF auf eine Zeile schrumpfen kannst. Aber behalte immer die anderen Browser dabei im Auge, denn die machen diesen Anwendungsfall ja richtig oder zumindest wie gewünscht.

Achso, fällt mir gerade ein. Es gibt auch eine Version 2.x des autosize. Das ist dann wohl kein jQuery Plugin mehr sondern ein eigenständiges Script. Vielleicht verhält sich das anders. Das würde evtl. auch erklären, warum es auf der Webseite des Autors klappt, wie du schreibst.
 
Sooooo,

ich habe mir jetzt die aktuelle Version von der Homepage des Programmierers geholt. Und die funktioniert nun einwandfrei. Keine störende Leerzeile mehr. Und man benötigt nun nur noch zwei JS scripte :)

Noch mal Danke für die Hilfe :icon6:
 
Jep,

es läuft einfach wunderbar. Und Du kann z.B. auch eine minimale Höhe angeben. Und das beste ist, das Du letztendlich nur die Datei "autosize.js" benötigst, die sich im Verzeichnis "dist" befindet.
 
Das kleine Script von oben kann man auch leicht abändern, so dass es auch schrumpft:
Code: 
<!DOCTYPE html>
<html>
<head>
<title>Seitentitel</title>
<script type="text/javascript">
window.addEventListener("load", function(){
	function checkSize(){
		var offset = 0;
		this.style.height = "";
		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);
		textarea.style.overflow = "hidden";
	});
}, 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>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben