input-Feld um Buttons zum Herauf- und Herunterzählen erweitern

von Oliver Richter (Kommentare: 0)

Das Bild zeigt ein Eingabefeld, daneben 2 kleine Buttons mit Minus und Plus-Symbol als Aufschrift

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.

inputZahlManipulation.zip (27,8 KiB)

Lizenz

Creative Commons Lizenzvertrag
Dieses Werk bzw. Inhalt steht unter einer Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 3.0 Deutschland Lizenz .

Zurück

Einen Kommentar schreiben

Bitte addieren Sie 5 und 5.

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.