input-Feld um Buttons zum Herauf- und Herunterzählen erweitern
von Oliver Richter
Dieses kleine Javascript erweitert das Label-Element eines Input-Feldes (mit spezifischer CSS-Klasse) mit zwei Zahl-Eingabefeldern inkl. Grafiken, die das schrittweise Hoch- bzw. Herunterzählen des Zahlenwertes im Input-Feld ermöglichen.
Hilfreich ist dies, wenn in einem Eingabefeld Zahlen oder Mengenangaben gemacht werden müssen. Dieser Wert dort lässt sich so auch mit der Maus, Finger, aber auch mit der Tastatur einstellen.
Voraussetzungen
Das Markup muss folgende Struktur aufweisen (beachten Sie, dass jedem <input>-Feld ein entsprechendes Label zugewiesen sein muss und die ID und FOR-Attribute gesetzt sein müssen:
<label for="INPUT_ID">Geben Sie die Anzahl an</label>
<input type="text" id="INPUT_ID" name="zahlWert" class="INPUT_CSS_KLASSE" value="" />Weiterhin benötigen Sie die MooTools-Bibliothek mindestens in der Version 1.3.1 oder höher. Die einzubindenen Dateien und weitere Infos entnehmen Sie bitte der vorliegenden Demo.
Demoseite und Code herunter laden
Nutzen Sie den folgenden Link, um eine ZIP-Datei herunter zu laden, die eine Demo-Webseite mit allen Elementen und Funktionalitäten enthält, sowie die notwendigen Grafiken, Stylesheets und Javascripte. Sie enthält ein Javascript, in dem die Javascript-Klasse inputZahlManipulation dokumentiert ist.
Lizenz
Dieses Werk bzw. Inhalt steht unter einer
Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 3.0 Deutschland Lizenz
.
Sie befinden Sich in der Detailansicht eines Blog-Eintrags.
Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.
Kommentare
Einen Kommentar schreiben