it-swarm-eu.dev

Darstellung einer numerischen Eingabe, die auf Inkremente einer bestimmten Zahl beschränkt ist

Ich benötige ein Formular, das einen Feldwert auf feste Inkremente von 50 beschränkt, und ich bin mir nicht sicher, was die eleganteste Art wäre, diese Einschränkung auf sinnvolle Weise darzustellen.

Die einfachste Lösung, die mir in den Sinn kommt, ist eine jQuery-Validierungsmethode in Kombination mit einer serverseitigen Logik, die an eine normale Textfeldeingabe gebunden ist. Andere Alternativen, die mir in den Sinn kommen, sind eine Art Auswahl (ich kenne derzeit keine), die in festgelegten Schritten fortschreitet, oder eine Dropdown-Liste mit einer festen Anzahl von Werten.

Irgendwelche anderen Ideen? Was würde sich für Sie am intuitivsten anfühlen?

14
Nathan Taylor

Ich würde vorschlagen, die in Safari für HTML5 implementierte Methode zu verwenden. Wie Sie sehen können hier gibt es in HTML5 neue Eingabetypen, die ebenfalls neue Attribute haben. In diesem Fall würden Sie einen Eingabetyp mit einem Attribut namens "step" verwenden. Der Code würde folgendermaßen aussehen:

<input type="number" step="50" min="0" name="some_name" value="0" id="some_name" />

Im Moment gibt es nicht viele Browser, die etwas damit anfangen. Wenn Sie diesen Code jedoch in Safari anzeigen (unter Verwendung eines HTML5-Doctype), sehen Sie ein normales Texteingabefeld mit einem Steuerelement auf der Seite, das Aufwärts-/Abwärtspfeile enthält, die den Wert innerhalb des Felds um den "Schritt" -Wert erhöhen Sie zugewiesen.

Für ein UI-Element würde ich das für Browser, die es noch nicht unterstützen, replizieren, einen Aufwärts-/Abwärtspfeil neben dem Eingabefeld. Um Benutzer wissen zu lassen, dass Sie einen bestimmten Wert erwarten, können Sie einfach schreiben: "Bitte geben Sie ein Vielfaches von 50 ein. Beispiel: 0, 50, 100, 150 usw." Dann benötigen Sie natürlich entweder clientseitigen oder serverseitigen Code, um zu überprüfen, ob die eingegebene Nummer innerhalb dieser Bereiche liegt.

9
RussellUresti

Verwenden Sie einen Schieberegler. Die meisten UI-Bibliotheken bieten Schieberegler und bieten normalerweise die Möglichkeit, einen 'Schritt' zu definieren, z. B. 50, und die Auswahl auf ein Vielfaches dieses Werts zu beschränken.

Wenn Sie HTML5 verwenden, hat das Eingabe-Tag einen "Bereich" -Typ (einschließlich eines Schrittattributs), den die meisten Browser, die HTML5 unterstützen, unterstützen sollten: http://dev.w3.org/html5/markup/input. range.html

7
Rahul

Was ist der Zweck?

Wenn es um Buchhaltung/Mathematik/Zahlen geht, würde ich einen Multiplikator vorschlagen. Sie sehen also ein "x 50" und es wird die Summe angezeigt. Wenn es sich bei einer logischen Anwendung um ein Inkrement von 50 handelt, warum dann nicht einfach "Inkremente von 50" verwenden?

4
Susan R

Ich denke, es ist am besten, einen Bereichsregler zu verwenden, wie von anderen vorgeschlagen. Oder Sie können eine Autocomplete Funktion für ein Eingabefeld verwenden, das den Vorschlag anzeigt, wenn der Benutzer mit der Eingabe beginnt. Hier ist das browserübergreifende Beispiel für beide Methoden.

Schieberegler: http://jqueryui.com/demos/slider/#range

Autocomplete: http://jqueryui.com/demos/autocomplete/

Es hängt auch wirklich von den Min & Max-Werten ab.

Ich habe nur eine reguläre Auswahlliste verwendet, um die möglichen Werte anzuzeigen. Eine andere Lösung besteht darin, die Summe auf einfache Weise anzuzeigen, damit der Benutzer den Multiplikator selbst eingeben und trotzdem das Ergebnis sehen kann.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

1
Nick P