Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2006 Teil von August

SELFHTML Forumsarchiv
Textarea mit dynamischer Höhe

Informationsseite
  1. Seite (CSS) Textarea mit dynamischer Höhe von Sascha, 23. 08. 2006, 17:17
nach unten

Textarea mit dynamischer Höhe

Die folgende Nachricht zum Thema stammt von: Sascha, 23. 08. 2006, 17:17

Hallo zusammen,

kann mir jemand verraten, wie ich es mittels CSS schaffe, daß ein Textarea-Element bei der Eingabe von Daten seine Höhe anpasst - also größer wird - sofern mehr Text eingegeben wurde, als ohne Scrollbar sichtbar wäre? Scrollbars sollten ebenfalls nicht sichtbar sein.

Zu sehen ist dieses u.a. in der aktuellen Version von phpmyadmin.

Vorab vielen Dank für Eure Hilfe!

Beste Grüße,
Sascha

nach obennach unten

Textarea mit dynamischer Höhe

Die folgende Nachricht zum Thema stammt von: wahsaga, 23. 08. 2006, 18:07

hi,

»» kann mir jemand verraten, wie ich es mittels CSS schaffe, daß ein Textarea-Element bei der Eingabe von Daten seine Höhe anpasst - also größer wird - sofern mehr Text eingegeben wurde, als ohne Scrollbar sichtbar wäre? Scrollbars sollten ebenfalls nicht sichtbar sein.

Nur mit CSS gar nicht, wenn muss schon Javascript zu Hilfe kommen.

ich habe so etwas mal versucht, es allerdings nicht browserübergreifend befriedigend hinbekommen.

»» Zu sehen ist dieses u.a. in der aktuellen Version von phpmyadmin.

Dann schau dort nach, wie es realisiert ist.

gruß,
wahsaga


--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }

nach obennach unten

Textarea mit dynamischer Höhe

Die folgende Nachricht zum Thema stammt von: Mathias Brodala, 23. 08. 2006, 18:15

Hallo Sascha.

»» kann mir jemand verraten, wie ich es mittels CSS schaffe, daß ein Textarea-Element bei der Eingabe von Daten seine Höhe anpasst - also größer wird - sofern mehr Text eingegeben wurde, als ohne Scrollbar sichtbar wäre?

Mit CSS: gar nicht.

»» Scrollbars sollten ebenfalls nicht sichtbar sein.
»»
»» Zu sehen ist dieses u.a. in der aktuellen Version von phpmyadmin.

Wie es dort gemacht wurde, kann ich im Moment nicht sagen, aber ich habe einen Lösungsvorschlag:

Beim Laden des Dokumentes speicherst du eine Referenz auf das jeweilige textarea-Element in einer Variable. Dies kannst du zum Beispiel per document.forms.elements-Knotenliste oder mit der getElementsByTagName-Methode tun.

Nun deaktivierst du per overflow-Eigenschaft des style-Objektes die Scrollbalken, indem du den Wert besagter Eigenschaft auf „hidden“ stellst.

Als nächstes weist du dem onkeyup-Event der Textarea eine Funktion zu. Onkeydown käme eigentlich auch in Frage, doch dies führt in IE und Konqueror zu Ruckeleien.

In dieser Funktion nun trennst du den Inhalt der Textarea an den Zeilenumbrüchen (\n) auf und weist der rows-Eigenschaft der Textarea die Anzahl der Elemente in eben erzeugtem Array zu.

Du solltest aber darauf achten sinnvolle Werte für cols und rows im HTML zu notieren, falls JS doch einmal nicht zur Verfügung stehen sollte.


Einen schönen Mittwoch noch.

Gruß, Mathias

--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]

nach obennach unten

Textarea mit dynamischer Höhe

Die folgende Nachricht zum Thema stammt von: Mathias Brodala, 23. 08. 2006, 18:16

Hallo nochmal.

»» In dieser Funktion nun trennst du den Inhalt der Textarea an den Zeilenumbrüchen (\n) auf und weist der rows-Eigenschaft der Textarea die Anzahl der Elemente in eben erzeugtem Array zu.

+length


Einen schönen Mittwoch noch.

Gruß, Mathias

--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]

nach obennach unten

Textarea mit dynamischer Höhe

Die folgende Nachricht zum Thema stammt von: wahsaga, 23. 08. 2006, 18:21

hi,

»» In dieser Funktion nun trennst du den Inhalt der Textarea an den Zeilenumbrüchen (\n) auf und weist der rows-Eigenschaft der Textarea die Anzahl der Elemente in eben erzeugtem Array zu.

Beim automatischen Umbruch dürfte kein \n erzeugt werden, jedenfalls nicht beim Default-Wrapping.

gruß,
wahsaga


--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }

nach obennach unten

Textarea mit dynamischer Höhe

Die folgende Nachricht zum Thema stammt von: Mathias Brodala, 23. 08. 2006, 19:18

Hallo wahsaga.

»» Beim automatischen Umbruch dürfte kein \n erzeugt werden, jedenfalls nicht beim Default-Wrapping.

Wo du Recht hast …

In diesem Fall fällt auch mir keine zufrieden stellende Lösung ein.


Einen schönen Mittwoch noch.

Gruß, Mathias

--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]

nach oben
Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2006 Teil von August

© 1998-2008 Seite Impressum, Software: Classic Forum