Formularfeld (textarea, input) mit Zeichenbegrenzung

Zeichenanzahl im Textfeld eines HTML-Formular begrenzen

Entwirft oder veröffentlicht man ein Online-Formular kommt es oft vor, dass man die eingebbare Zeichenanzahl eines Textfeldes, wie textarea oder input type=”text” begrenzen möchte und ggf. dies dem Benutzer auch visualisieren möchte, ähnlich dem nachfolgenden Bild.

Gif-Animation eines Textarea in Online-Formular mit Zeichenbegrenzung
Beispiel eines Textarea in Online-Formular mit Zeichenbegrenzung

Gerade bei freien mehrzeiligen Textfeldern, wie man sie oft in Kontaktformularen verwendet, macht es Sinn die Eingabe zu begrenzen, damit nicht ganze Romane reinkopiert werden können oder wenn zur Weiterverarbeitung auch nur ein limitierte Zeichenanzahl zur Verfügung steht.

Zeichen bei <textarea> begrenzen

Die einfache Zeichenbegrenzung in einem HTML-Formular bei einem mehrzeiligen Textfeld-Element, also vom Typ <textarea> ist relativ einfach. Dafür wurde in der HTML-Syntax das Attribut maxlenght vorgesehen. Der nachfolgende beispielhafte Code zeigt, wie eine Zeichenbegrenzung auf 50 Zeichen aussehen würde.

<textarea maxlength="50">
Text hier eingeben...
</textarea> 

Zeichen bei <input type=”text”> begrenzen

Beim einzeiligen Eingabefeld, welches in HTML durch <input type=”text”> dargestellt wird, lässt sich die Zeichenbegrenzung genauso über das maxlength-Attribut einfügen, wie beim mehrzeiligen Textfeld. Der zugehörige Beispielcode in HTML sieht dann so aus. Diesmal mit einer Begrenzung von 100 Zeichen.

<input type="text" name="occasion" value="" maxLength="100">

Begrenzung der Zeicheneingabe mit JavaScript

Die alleinge Begrenzung der Zeichenanzahl in einem Textfeld eines HTML-Formular führt zu einer schlechten User-Experience bzw. unschönen Usability. Man wundert sich einfach, warum es trotz kräftigem Einschlag auf die Tastatur nicht weiter geht. Man sollte also zumindestens per Anmerkung darauf Hinweisen, dass nur “XX Zeichen” zur Verfügung stehen. Noch schöner ist es, wenn man es wie in dem gif-Bild oben dargestellt, visualisieren kann, wie viele Zeichen noch verbleiben.

Zur Darstellung der Zeichenbegrenzung benutzt man ein entsprechendes JavaScript. Das Beispiel bezieht sich auf ein 5-zeiliges Textfeld in einem Online-Formular unter welchem die Anzahl der Zeichen als “von/max” dargestellt werden.

<div>
<textarea id="comment" name="comment" rows="5" maxlength="500"></textarea>
<div id="the-count_comment" style="">
<span id="current_comment">0</span>
<span id="maximum_comment"> / 500</span>
</div>

Das zugehörige JavaScript kann dann wie folgt aussehen. Es wird anhand eines Grenzwert die Formatierung der Anzeige farblich geändert, um die limitierte Zeichenanzahl zu visualisieren.

<script>
$('#comment').keyup(function () {
  var characterCount = $(this).val().length,
  current = $('#current_comment'),
  maximum = $('#maximum_comment'),
  theCount = $('#the-count_comment');
  var maxlength = $(this).attr('maxlength');
  var changeColor = 0.75 * maxlength;
  current.text(characterCount);

  if (characterCount > changeColor && characterCount < maxlength) {
    current.css('color', '#FF4500');
    current.css('fontWeight', 'bold');
  }
  else if (characterCount >= maxlength) {
    current.css('color', '#B22222');
    current.css('fontWeight', 'bold');
  }
  else {
    var col = maximum.css('color');
    var fontW = maximum.css('fontWeight');
    current.css('color', col);
    current.css('fontWeight', fontW);
  }
});
</script>

Formular-Generatoren, wie der DA-FormMaker bringen solche Funktionen gleich mit. Dann spart man sich insbesondere, wenn man mehrere Formulare zu erstellen hat diese Arbeit, da es doch nach eigener Erfahrung ein wenig Fummelei ist bis man alles nach seinen Wünschen konfiguriert hat.

Ein Kommentar

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.