WaBis

walter.bislins.ch

JavaScripts: ResizeTextField

Die JavaScript-Funktion ResizeTextField ändert die Höhe eines textarea Elementes so, dass die ganze HTML-Seite die zur Verfügung stehende Fensterhöhe ausnutzt, ohne dass Platz verschwendet wird oder gescrollt werden muss.

Problem

Wenn auf einer Webseite ein textarea Element verwendet wird, muss man dessen Höhe im HTML-Dokument festlegen. Praktisch immer enthält die Seite vor und nach der textarea noch weitere Elemente wie Header und Footer. Nun möchte man oft, dass sich die Höhe der textarea gerade so einstellt, dass die vollständige Seite inklusive Header und Footer und textarea genau ins Fenster passt. Wenn das Fenster zu klein wird, soll die textarea eine Mindesthöhe nicht unterschreiten. In diesem Fall wird natürlich nicht mehr die ganze Seite im Fenster Platz haben und es erscheinen Scrollbars.

Lösung

Damit das folgende JavaScript in allen Browsern funktioniert, verwende ich das Modul x.js, welches alle Funktionen enthält, die mit einem x beginnen.


var TextFieldId = 'myTextfield';
var TextFieldMinHeight = 150;

xOnLoad( Init );

function Init() {
  var tf = xGet( TextFieldId );
  xAddEvent( window, 'resize', ResizeTextField );
  ResizeTextField();
}

function ResizeTextField() {
  var tf = xGet( TextFieldId );
  var oldH = xHeight( tf );
  var otherH = xHeight( document.body ) - oldH;
  var newH = xClientHeight() - otherH;
  if (newH < TextFieldMinHeight) newH = TextFieldMinHeight;
  xHeight( tf, newH );
}


Mit xOnLoad wird die Funktion Init im System installiert. Die Funktion Init wird gerufen, sobald die Seite vollständig geladen ist.

Die Funktion Init installiert die Callback-Funktion ResizeTextField, sodass diese bei jeder Änderung der Fenstergrösse aufgerufen wird. Zudem wird diese Funktion gleich aufgerufen, um die textarea an die aktuelle Fenstergrösse anzupassen.

Die Funktion ResizeTextField wird bei jeder Änderung der Fenstergrösse gerufen. Sie holt sich die aktuelle Höhe des HTML-Dokumentes mit xHeight( document.body ) und zieht die Höhe der textarea davon ab. Der resultierende Wert otherH ist jene Höhe, die von allen anderen Elementen ausser der textarea beansprucht wird. Mit xClientHeight() wird nun die Höhe des Fensters abgefragt. Wenn man davon otherH abzieht, so erhält man die Höhe, welche die textarea einnehmen kann (newH). Ist diese Höhe kleiner als TextAreaMinHeight, so wird die Minimalhöhe statt dessen verwendet. Mit xHeight( tf, newH ) wird schliesslich die Höhe der textarea auf den errechneten Wert gesetzt.

Weitere Infos zur Seite
Erzeugt Freitag, 19. Oktober 2012
von wabis
Zum Seitenanfang
Geändert Samstag, 25. Juni 2016
von wabis