Schaltflächen-Zahl-Inkrementierer mit Plus/Minus

Textfelder in Formularen können zur Übermittlung von Zahlen verwendet werden. Eine gängige Anwendung wäre ein „Menge“-Eingabefeld auf einer E-Commerce-Website. Das Ändern des Mengenwertes bedeutet aus Benutzersicht, dass man zum Eingabefeld tabbt oder klickt, dessen aktuellen Inhalt löscht und einen neuen Wert eingibt. Erwartetes Verhalten, bei dem sich niemand beschwert, aber diese Zahleneingaben könnten etwas benutzerfreundlicher sein. Mit Hilfe von JavaScript (ja, jQuery) machen wir genau das.

Sauberes HTML

Hier ist das Formular-Markup. Nichts Zusätzliches hinzugefügt, nur sauberer HTML. Ohne JavaScript funktioniert dieses Formular perfekt und enthält keine unnötigen Elemente.

<form method="post" action="">
    <div>
        <label for="name">French Hens</label>
        <input type="text" name="french-hens" id="french-hens" value="3">
    </div>
    <div>
        <label for="name">Turtle Doves</label>
        <input type="text" name="turtle-doves" id="turtle-doves" value="2">
    </div>
    <div>
        <label for="name">Partridges</label>
        <input type="text" name="partridge" id="partridge" value="1">
    </div>
    
    <input type="submit" value="Submit" id="submit">
</form>

Das CSS…

… ist nicht sehr interessant. Vielleicht ein paar Dinge, die man beachten sollte. Alles ist nach links gefloatet und die DIVs haben `overflow: hidden`, um die Floats aufzuheben. Die Labels sind `display: block` und `text-align: right`, um das Grid-System zu realisieren. Pixelgenaue Anpassungen werden hier und da vorgenommen, um alles richtig auszurichten. Ich habe nicht viel Zeit dafür aufgewendet, daher kann es zu einigen browserübergreifenden Unterschieden kommen.

Einige Schaltflächen erstellen

Ein paar Schaltflächen in Photoshop erstellen. Warum nicht gleich einen Sprite verwenden? Ich werde die PSD-Datei im Download enthalten, falls Sie diese verwenden möchten.

Inkrementier-Schaltflächen anhängen

Wir müssen diese Schaltflächen an jedes Eingabefeld anhängen. Sie werden im Markup feststellen, dass jedes Label-/Eingabefeldpaar in einem DIV verpackt ist. Das ist eine gute Praxis, damit die Label-Eingaben für eine bessere Lesbarkeit auf einer eigenen Zeile umgebrochen werden, wenn CSS deaktiviert ist. Es ist auch für die Validierung mit einigen DOCTYPES erforderlich. UND es ist der perfekte kleine Ankerpunkt, den wir ansprechen können, um diese Schaltflächen anzuhängen.

$(function() {

    $("form div").append('<div class="inc button">+</div><div class="dec button">-</div>');

});

Zwei Klassen pro Schaltfläche, eine generische „button“-Klasse, die 90 % des Stylings ausmacht und die Klasse, mit der wir das Klickereignis binden. Die andere eindeutige Klasse dient zur Anpassung der Hintergrundposition und zur Nutzung des Sprites.

Funktionieren lassen

Das „ganz normale Englisch“

1. Selektor cachen
2. Den „alten“ Wert des Eingabefelds speichern (Wert zum Zeitpunkt des Klickens)
3. Wenn die „Plus“-Schaltfläche geklickt wird…
4. …den Wert um eins erhöhen
5. Andernfalls, wenn die „Minus“-Schaltfläche geklickt wird…
6. …den Wert um eins verringern
7. Den neuen Wert in das Eingabefeld einfügen

$(".button").on("click", function() {

  var $button = $(this);
  var oldValue = $button.parent().find("input").val();

  if ($button.text() == "+") {
	  var newVal = parseFloat(oldValue) + 1;
	} else {
   // Don't allow decrementing below zero
    if (oldValue > 0) {
      var newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 0;
    }
  }

  $button.parent().find("input").val(newVal);

});

Der obige Code erledigt alles, was wir beschrieben haben, mit ein wenig zusätzlicher Logik. Bevor der Wert verringert wird, wird sichergestellt, dass die Zahl mindestens 1 oder höher ist. Dies verhindert, dass der Wert jemals negativ wird (zumindest durch die Verwendung dieser Schaltflächen). Das ist ein No-Brainer für „Mengen“-artige Eingaben, aber wenn Ihre Anwendung dies nicht benötigt, entfernen Sie einfach die „if“-Wrapper.

Es gibt auch ein paar auskommentierte Zeilen zur AJAX-Speicherung. Wenn Ihre Anwendung dynamisch und modern ist, möchten Sie den Wert möglicherweise automatisch speichern, nachdem eine Schaltfläche gedrückt wurde, damit sie sich mehr wie eine Desktop-Anwendung anfühlt.

Wenn Sie das tun würden, könnten Sie etwas wie das hier einfügen (vielleicht)

var id = $button.attr("id");
$.ajax({
  type: "POST",
  url: "dosomething.php?id=" + id + "&newvalue=" + newVal,
  success: function() {
    $button.parent().find("input").val(newVal);
  }
});

Sie würden wahrscheinlich die letzte Zeile der Klickfunktion entfernen, wo der Wert aktualisiert wird, und diese in die obige „success“-Unterfunktion verschieben. Auf diese Weise wird die Zahl nicht visuell aktualisiert, es sei denn, die AJAX-Speicherung war erfolgreich.

Probieren Sie es aus

Demo ansehen   Dateien herunterladen

MooTools

Und wie immer, David Walsh mit einer Portierung auf MooTools.