Auto resizing Textarea

By | November 30
0 Comment

Schon länger nichts mehr gepostet, deshalb kommt nun wieder etwas cooles :) Wer kennt das nicht, das ewige Problem mit den riesigen Textareas in Formularen. Diese muss man immer wieder groß genug gestalten damit Inhalt auch recht übersichtlich für den User rüberkommt. Nur sieht das dann oft nicht sehr nett aus mit vielen riesigen “Eingabeboxen”. Die Idee ist jetzt die Textarea einfach automatisch zu vergrössern abhängig vom user-input (Idee ist nicht von mir ;) Arash sei hier erwähnt …). Hab das mal in eine javascript-funktion gepackt und hier das Resultat:

Demo (IE und FF getestet)

Praktisch ist die Funktionalität, welche nur die Reihen expandiert, da man nach unten oft erweitern kann… zur Seite ists oft schwieriger. Je nach Layout halt … hier der Quellcode des Demos

HTML4
< view plain text >
  1. <script>
  2.     function getMax(anumber, another) {
  3.         return((anumber > another) ? anumber : another);
  4.     }
  5.  
  6.     // automatically resizes a textarea depending on the input
  7.     // call the function in the onkeyup-event of the tarea.
  8.     // t [textarea]: the textarea you want to handle
  9.     // minRows [int]: minimum amount of rows
  10.     // minCols? [int]: minimum amount of columns.
  11.     function resizeTextArea(t, minRows, minCols) {
  12.         t.rows = minRows;
  13.         t.setAttribute("wrap", "off");
  14.         t.style.overflow = "auto";
  15.  
  16.         lines = t.value.split("n");
  17.  
  18.         if (arguments.length > 2) {
  19.             t.cols = minCols;
  20.             maxChars = lines[0].length;
  21.             for(i = 1; i < lines.length; i++) {
  22.                 currentLength = lines91;i93;.length;
  23.                 if (currentLength > maxChars) maxChars = currentLength;
  24.             }
  25.             t.cols = getMax(maxChars, minCols);
  26.         }
  27.         t.rows = getMax(lines.length + 1, minRows);
  28.     }
  29. </script>
  30.  
  31. <div>
  32.     Nur Reihen werden erweitert:<br />
  33.     <textarea onkeyup="resizeTextArea(this, 5);"></textarea>
  34. </div>
  35. <div>
  36.     Reihen und Zeilen werden erweitert:<br />
  37.     <textarea onkeyup="resizeTextArea(this, 5, 5);"></textarea>
  38. </div>