Formular

Ein Beispiel für das Zählen der erlaubten Zeichen in einem
Formular-Eingabefeld. 

Erlaubte Zeicheneingabe Textarea runter zählen

Beispiel Formular von Mobirise.
Gefunden auf stockoverflow.com

Hier nur auf 50 Zeichen zum Testen begrenzt.
Ihr könnt das gerne ausprobieren, das Formular wird nicht gesendet.

Verbleibende Zeichen 50 (von 50)


Hier zur Info mein JavaScript für die Anzeige der verleibenden Zeichen
Das gehört in den Bereich "Inside <head> code" der Seiteneinstellungen. Hier als Beispiel auf 5000 Zeichen begrenzt.

<script>
  function countChar(val) {
    var len = val.value.length;
    if (len >= 5001) {
      val.value = val.value.substring(0, 5000);
    } else {
      $('#charNum').text(5000 - len);
    }
  };
</script>


Den Formular-Bereich "textarea" fügt Ihr das JavaScript-Event "onkeyup" mit der Funktion aus dem Skript oben hinzu:

<textarea type="text" onkeyup="countChar(this)" class="form-control" name="message" rows="7" placeholder="Nachricht" data-form-field="Message"></textarea>


Zur Anzeige schreibt Ihr, z.B. über das <div> von der Textarea, diesen Text mit der id="charNum" aus dem Skript oben:

<p>Verbleibende Zeichen <span id="charNum">5000</span> (von 5000)</p>



Hier zur Info auch noch meine CSS für die transparente Anzeige der Formular-Felder:
Weitere Felder schreibt Ihr, durch Kommata getrennt, adäquat hinzu. Das gehört in den "Code Editor" in den Bereich "CSS Editor".

input[type="text"], input[type="email"], textarea {
  background-color: rgba(255, 0, 0, 0.4);
  color: white;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  background-color: rgba(173, 216, 230, 0.7);
  color: white;
  font-weight: bold;
}