In der Vergangenheit haben wir bereits darüber berichtet, wie man +/- Buttons zu numerischen Eingabefeldern hinzufügt, um die Benutzeroberfläche zu verbessern (in manchen Fällen ist es einfacher als Tippen). Leser Hitesh N Chavda hat mich mit der Idee kontaktiert, dies stattdessen mit dem Scrollen des Mausrads zu tun.
Wenn sich der Mauszeiger innerhalb des Eingabefeldes befindet, können Sie das Mausrad verwenden, um die Zahl nach oben und unten zu erhöhen.
Hitesh hat eine Technik dafür mit jQuery entwickelt, die großartig funktioniert. Später fand er ein Plugin, das bereits für die Behandlung von Mausrad-Ereignissen entwickelt wurde, was wirklich nett ist und die Dinge vereinfacht. Nur zum Spaß wird die Demo beide Versionen enthalten.
HTML
Das könnte buchstäblich auf jedem Element funktionieren, aber Textfelder machen am meisten Sinn. Vielleicht könnte dies in einem Zeiterfassungsformular verwendet werden, wo Sie die Anzahl der Stunden/Minuten eingeben müssen, die für etwas aufgewendet wurden. Oder vielleicht in einem Bestellformular, um einzugeben, wie viele von etwas bestellt werden sollen.
In unserer Demo haben wir nur ein Label-Input-Paar, wie man es in fast jedem <form> finden würde.
<div>
<label for="how-many">How Many? </label>
<input type="text" id="how-many" class="wheelable" value="1" name="how-many" />
</div>jQuery
Wenn Sie sich die Version ohne Plugin ansehen möchten, laden Sie einfach die untenstehenden Dateien herunter. Hier behandeln wir der Kürze halber die Verwendung des Plugins. Sie müssen jQuery, das Plugin und Ihre eigene JavaScript-Datei einbinden.
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/increment.js"></script>Wenn der DOM bereit ist, binden wir das neue „mousewheel“-Ereignis an das Eingabefeld. Wenn dieses Eingabefeld ausgelöst wird, inkrementieren wir den Wert um eins, wenn es ein „Aufwärts“-Mausrad-Scrollen ist, und dekrementieren ihn um eins, wenn es „Abwärts“ ist (es sei denn, er ist bereits Null).
Das Anhängen des Bildes in der ersten Zeile dient dazu, dass Benutzer ohne JavaScript die Grafik nicht sehen, die die Mausrad-Scrollbarkeit anzeigt.
$(function() {
$("div").append('<img src="images/mousewheelupdown.png" alt="Scroll up or down with mousewheel" />');
$("#how-many").bind("mousewheel", function(event, delta) {
if (delta > 0) {
this.value = parseInt(this.value) + 1;
} else {
if (parseInt(this.value) > 0) {
this.value = parseInt(this.value) - 1;
}
}
return false;
});
});Was ist mit nicht-numerischen Eingabefeldern?
Das müssen Sie je nach Bedarf handhaben. Jetzt, da Sie das „mousewheel“-Ereignis haben, das das Plugin bereitstellt, kann die Funktion, die Sie schreiben, wenn dieses Ereignis ausgelöst wird, alles sein. In der Demo habe ich ein Texteingabefeld, das durch eine Liste verschiedener Walarten rotiert...
$("#whale").bind("mousewheel", function(event, delta) {
if (this.value == "Blue") {
this.value = "Sperm";
}
else if (this.value == "Sperm") {
this.value = "Orca";
}
else if (this.value == "Orca") {
this.value = "Humpback";
}
else if (this.value == "Humpback") {
this.value = "Blue";
}
return false;
});
Schwertwale bekommen in letzter Zeit viel Aufmerksamkeit, Zeit für etwas Buckelwal-Liebe.
Degradation
Dies ist reine progressive Enhancement. Ohne JavaScript bleiben die Eingabefelder weiterhin Eingabefelder, die sich wie jedes andere Eingabefeld verhalten.
Schön. Könnte besser sein, wenn zum Beispiel bei nicht-numerischen Daten aus einer Liste ausgewählt würde und wenn kein JS vorhanden ist, dies eher angezeigt würde.
Web-Interfaces werden bequemer. Super!
Guter Artikel. Beim Ansehen des nicht-numerischen Beispiels denke ich, dass ein SWITCH-Fall besser funktionieren würde. Tatsächlich könnte man sogar ein Array verwenden.
Ich bin mir nicht sicher, ob die Nützlichkeit der Idee, aber wie üblich ist es ein interessanter Vorschlag. Mein Problem damit ist, dass es kein „Standard“-Symbol für das Mausrad gibt, daher frage ich mich, ob die Leute wissen würden, dass es mit diesem Eingabefeld funktioniert.
Dies ist ein sehr cooles Feature und ohne aktiviertes JS funktionieren die Eingabefelder einwandfrei, indem man einfach den Wert eingibt, grazile Degradation vom Feinsten.
Diese Methode ist jedoch nicht intuitiv.
Ich meine, wie soll ein „dummer“ Benutzer wissen, dass er das Scrollrad benutzen kann? Das kleine Bild mit den Pfeilen beschreibt die Funktion nicht.
Ich denke, es wäre besser, einen kleinen Text hinzuzufügen, der die Verwendung des Scrollrads beschreibt, natürlich begleitet von einer Grafik.
Viel Potenzial mit diesem Mausrad-Feature.
Vielen Dank für das Tutorial.
Dies ist ein großartiges Tutorial für technisch versierte Personen, aber die Implementierung für technisch nicht versierte Personen könnte eine Herausforderung sein. Nicht jeder hat eine Maus mit einem Rad.
Ich stimme Ricardo zu, vielleicht ein Tooltip, Flash-Daten oder eine andere Möglichkeit, den Benutzern mitzuteilen, dass sie schnell und interaktiv aus dem Dropdown-Menü auswählen können.
„Nicht jeder hat eine Maus mit einem Rad“, aber es funktioniert gleichermaßen gut auf Multitouch-Trackpads ;)
Könnte besser als Erweiterung eines
Ach kommt Leute. Das ist eine Demo, wie es funktioniert. Nicht, wie man Leute dazu bringt, es zu verstehen.
Nehmen Sie, was Chris Ihnen gegeben hat, und machen Sie es nach Ihren Wünschen.
Sehr nettes zusätzliches Feature, Chris.
Wir haben genau das getan, was Sie gesagt haben: Wir haben genommen, was Chris uns gegeben hat, und es nach unseren Wünschen gestaltet.
Lesen Sie meine und Jordans Beiträge noch einmal, wir bieten Lösungen an, wie es in der realen Welt besser funktionieren kann, wir beschweren uns nicht einfach so.
Und wir stimmen auch zu, dass dies ein großartiges Tutorial ist.
Ziemlich raffiniert. Leider habe ich einen der Werte für Wal geändert, und nachdem ich das getan hatte, konnte ich nicht mehr scrollen. Das könnte etwas sein, das man bedenken sollte – Scrollen zulassen, aber nicht basierend auf dem aktuellen Wert, wenn er nicht in der „Liste“ ist.
Oh, sehr nett.
Interessant, aber würden Sie damit nicht all die Leute ausschließen, die keine Maus benutzen?
Funktioniert nicht mit einer Magic Mouse :S
Das ist gut zu wissen! Schade..
Es funktioniert mit meiner Magic Mouse.
Ich finde das ziemlich cool. Mir gefällt die Idee des Tooltips, wenn man über das Eingabefeld fährt.
Coole Idee.
Grazile Degradation funktioniert großartig, wenn sie kein JavaScript haben. Es wäre großartig, wenn Sie auch grazile Degradation hätten, wenn ihre Maus kein Scrollrad hat.
Cooles Konzept!
Um all diese hässlichen if/elses zu vermeiden, weisen Sie den Wert einfach einem benutzerdefinierten Attribut zu und inkrementieren Sie dieses auf die gleiche Weise wie einen Wert… und verweisen Sie dann einfach auf ein Array, das alle Walarten enthält.
Mit dem Mausrad-Plugin kann man auch messen, wie schnell die Leute die Maus bewegen, sodass man schneller inkrementieren könnte, wenn sie schneller scrollen. (Wie z. B. 2 oder 3 auf einmal springen, wenn sie schnell genug sind.)
Schönes Konzept ^_^ Wieder einmal sind Sie eine Inspirationsquelle für uns!! Wir lieben Ihre Tipps (Entschuldigung für mein Englisch) und einen schönen Tag.
Richtig, also bestimmt das Delta-Argument, in welche Richtung sich das Rad dreht?
Interessante Informationen. Es ist schön zu sehen, dass wir uns von den 90ern entfernt haben und Eingaben auf verschiedene Weise implementieren können.
Hat jemand daran gedacht, eine Website zu entwerfen, die einen Desktop nachahmt, wie die Fanbox-Seite?
Sehr, sehr, sehr nützlich. Dies wird die Web-Interaktion beschleunigen. Ich werde dies von nun an auf den meisten meiner Projekte verwenden.
Ich denke, der Tooltip wäre eine gute Ergänzung (wahrscheinlich sollte man ihn mit JavaScript hinzufügen, da es seltsam erscheint, den Benutzern zu sagen, dass sie etwas tun können, wenn es nicht funktioniert).
Auch wäre es möglich, vielleicht den Bereich zu erweitern, über den der Benutzer scrollen kann, um z. B. das Label und die Grafik einzubeziehen? Ich denke, das wäre eine nette Geste (man darf nur keinen zu großen Bereich machen, um das Scrollen zu unterbrechen).
Es ist sehr nützlich! Danke
Ich bin unentschlossen bei diesem einen! Ich denke, funktional ist es ziemlich cool und anders usw., ich kann nicht sagen, dass ich viele Websites besucht habe, die diese Funktion nutzen. Aber gibt es dafür einen bestimmten Grund?
Meiner Meinung nach finde ich es nicht sehr benutzerfreundlich, besonders wenn man, wie jemand zuvor erwähnte, ein „dummer Benutzer“ ist. Ich persönlich ziehe es vor, auf ein Dropdown zu klicken und eine Liste von Auswahlmöglichkeiten zu sehen und einfach meine gewünschte auszuwählen.
Ich denke, die Verwendung für Zahlen ist in Ordnung, solange der Benutzer die Zahl immer noch eingeben kann, dann ist das großartig. Aber von der Wortwahl her sehe ich nicht, wie es erfolgreich eingesetzt werden könnte.
Nur meine Meinung!
Es ist großartig, besonders für numerische Werte.
Ich werde das auf meiner Website auf jeden Fall verwenden.
Danke!
Ich denke, das Ding sollte auch ausgelöst werden, wenn man mit der Maus über das Pfeilsymbol neben dem Eingabefeld fährt.
… anstatt nur, wenn man über das Eingabefeld fährt.
Chris,
Diese Diskussion hat mich dazu inspiriert, ein Plugin zu veröffentlichen, das ich für unsere Unternehmens-Zeiterfassungs-App entwickelt habe, Increment: Increment – jQuery Plugin.
http://www.sean-o.com/blog/index.php/2010/03/04/jquery-plugin-increment/
Es ermöglicht eine effiziente tastaturgesteuerte Wertmanipulation mit den Pfeiltasten, mit Shift/Strg/Cmd-Modifikatoren für größere/kleinere Änderungen und optionalen grafischen UI-Hinweisen.
Sehr cool! Mir gefällt, wie es sich immer noch effizient degradiert, wenn kein JavaScript vorhanden ist.
Man könnte auch .delegate() verwenden, aber das wäre wahrscheinlich nützlicher, wenn es mehrere Eingabefelder gibt, wie auf einer Produkt-Suchergebnisseite.
$("#page-wrap").delegate("#how-many-2", "mousewheel", function(event, delta) {
if (delta > 0) {
this.value = parseInt(this.value) + 1;
} else {
if (parseInt(this.value) > 0) {
this.value = parseInt(this.value) - 1;
}
}
return false;
});
Diese Funktionalität ist großartig, ein gutes Beispiel für progressive Enhancement. Ich frage mich schon seit vielen Monaten, warum der „numerische Stepper/Spinner“ kein offizieller Bestandteil von jQuery UI ist… oder irgendeinem anderen JavaScript-Framework.