Javascript
Benutzerfreundlichere Textareas mit jQuery-Plugin
Wie prettyComments das Surfer-Leben erleichtert
So ziemlich jede Website besitzt in irgendeiner Art und Weise eine Möglichkeit über die der Benutzer Kontakt
zum Betreiber aufnehmen kann. Sei dies über Kommentarfunktionen einzelner Blogeinträge oder ein Kontaktformular.
Allen diesen Möglichkeiten gemein ist die Verwendung eines HTML-Formulars und in diesem eine Textbox (Textarea) in
der der Benutzer seinen Senf eingeben kann.
Nun ist der aktuelle HTML-Standard schon uralt und ergo hat sich bezüglich der Funktionalität der
Formular-Steuerelemente nichts getan. So ist es immer noch ein ziemlicher Krampf einen etwas längeren Text zum
Beispiel in ein Kommentarfeld einzugeben, wenn der Webdesigner gerade mal 3 Zeilen sichtbar zur Verfügung stellt.
Möchte man noch einmal nachschauen was man drei Sätze weiter oben geschrieben hat, fängt man an zu scrollen.
Der Safari-Browser "pimpt" diese Textareas zumindest so, dass der Benutzer sie sich
etwas größer ziehen kann, aber befriedigend ist das nicht, zumal die meisten wohl mit dem IE oder Firefox
unterwegs sind.
Der Kanadier Stéphane Caron hat sich des Themas auf eine sehr pfiffige und einfache Weise
angenommen. Er hat auf Basis des Javascript-Frameworks jQuery das Plugin
prettyComments entwickelt,
dass, vom Webentwickler in die Seite eingebunden, automatisch die Höhe einer solchen Textbox um eine Zeile
erweitert, sobald der Benutzer in der letzten Zeile angelangt ist.
Der ganze Zauber ist derart einfach in die eigenen Seiten einzubauen, dass es schon fast an Fahrlässigkeit grenzt,
wenn man es als Webmaster nicht tut.
<!-- Einbinden des jQuery-Plugins -->
<script src="js/prettyComments.js" type="text/javascript"></script>
...
<!-- Aufruf der Methode 'prettyComments' für alle Textareas der Seite -->
<script type="text/javascript">
$(document).ready(function() {
$("textarea").prettyComments({ animate: true });
});
</script>
Wer das Ding in Aktion sehen möchte, muss auf dieser Seite nur ein klein wenig nach unten zu den Kommentaren scrollen.
Happy Coding :)