gbInputLen v1.0
gbInputLen liest die Anzahl der Zeichen eines Textfeldes (Input) oder eines Textbereichs (Textarea) und gibt die restliche Zeichenlänge in einer Ausgabe aus. Dabei wird die Eingabe auf die eingestellte Zeichenlänge (maxlength) begrenzt. Somit ist es kein Problem mehr maxlength bei Textarea anzuwenden, um die Zeichenlänge eines mehrzeiligen Eingabefeldes zu begrenzen. Diese JavaScript Klasse eignet sich besonders für Formulare die in ihrer Eingabe beschränkt werden sollen.
Demo
» gbInputLen Demo herunterladen
Einbinden
- Laden Sie die benötigt Daten » hier herunter.
- Binden Sie die JavaScript Dateien in Ihrer Seite ein.<script type="text/javascript" src="js/moo1.3.1_compile.js"></script>
<script type="text/javascript" src="js/gbinputlen_compile.js"></script> - Legen Sie Ihre Eingabemasken für das Formular an. Vergeben Sie den Eingabemasken, die in ihre Zeichenlänge begrenzt werden sollen, einen Klassennamen (class) an. Das Ausgabefeld kann jeder Eingabemaske zugeordnet oder mit verschiedenen Eingabemasken kombiniert werden. Die Ausgabe braucht einen eindeutigen Identifikationsnamen (id).<textarea name="input100" rows="10" cols="10" class="input100" style="width: 400px; margin-bottom: 0.4em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea><br /><span id="output100"></span>
- Weisen Sie der Klasse nun Ihre Optionen zu.<script type="text/javascript">
var gbInputLenOpt = {
inputAr: [{
handler: 'input100',
maxlength: 100,
output: 'output100'
},
{
handler: 'input45',
maxlength: 45,
output: 'outputkombo'
},
{
handler: 'input10',
maxlength: 10,
output: 'outputkombo'
}],
txt: 'Zeichen übrig'
}
</script> - Die JavaScript Klasse wird automatisch aufgerufen, wenn die Webseite vollständig geladen ist.
- Das Aussehen der Formularfelder können Sie wie gewohnt per CSS einstellen.
Erläuterung
- inputAr
In diesem Array werden alle Informationen (handler, maxlength, output) jeder Eingabemaske die begrenzt werden soll festgehalten. Dies erlaubt Ihnen eine Vielzahl an Eingabemasken zu begrenzen und mit der Ausgabe zu kombinieren.inputAr: [{
handler: 'input100',
maxlength: 100,
output: 'output100'
}]- handler
Hier wird der Klassenname (class) der Eingabemaske festgehalten. - maxlength
Hier tragen Sie die maximale Zeichenlänge der Eingabemaske ein. - output
Geben Sie hier den Identifikationsnamen (id) der Ausgabe an, in der die restliche Zeichenlänge dargestellt werden soll.
- handler
- txt
Neben der Darstellung der restlichen Zeichenlänge, können Sie noch einen ergänzenden Text für die Ausgabe hinzufügen. Das ist für mehrsprachige Webseiten zum Vorteil.
Z.B. 'Zeichen übrig' (Ausgabe: 100 Zeichen übrig)
