it-swarm.it

Come rappresentare un input numerico limitato a incrementi di alcuni numeri

Ho un requisito per un modulo che limita un valore di campo a incrementi fissi di 50 e non sono sicuro di quale sarebbe il modo più elegante di rappresentare tale vincolo in modo significativo.

La soluzione più semplice che viene in mente è un metodo di convalida jQuery combinato con una logica lato server collegata a un normale input di campo di testo. Altre alternative che vengono in mente sono un selettore di numeri di qualche tipo (non ne conosco uno attualmente) che avanza negli incrementi impostati o in un elenco a discesa con un numero fisso di valori.

Altre idee? Cosa ti sembrerebbe più intuitivo?

14
Nathan Taylor

Suggerirei di utilizzare il metodo implementato in Safari per HTML5. Come puoi vedere qui ci sono nuovi tipi di input in HTML5 che hanno anche nuovi attributi. In questo caso, useresti un tipo di input di numero con un attributo chiamato "step". Il codice sarebbe simile al seguente:

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

In questo momento non ci sono molti browser che fanno qualcosa con questo. Tuttavia, se visualizzi quel codice in Safari (usando un doctype HTML5), quello che vedi è un normale campo di input di testo con un controllo sul lato che fornisce frecce su/giù che incrementano il valore all'interno del campo del valore "step" hai assegnato.

Quindi, per un elemento dell'interfaccia utente, lo replicerei per i browser che non lo supportano ancora, una freccia su/giù accanto al campo di input. Per far sapere agli utenti che ti aspetti un valore specifico, puoi semplicemente scrivere "inserisci un multiplo di 50. es: 0, 50, 100, 150, ecc." Quindi, ovviamente, avrai bisogno del codice lato client o lato server per confermare che il numero inserito rientri in tali intervalli.

9
RussellUresti

Usa un cursore. La maggior parte delle librerie dell'interfaccia utente offrono controlli a scorrimento e in genere offrono la possibilità di definire un 'passaggio', come 50, limitando la selezione a qualsiasi multiplo di quel valore.

Se stai usando HTML5, il tag di input ha un tipo "range" (incluso un attributo step) che la maggior parte dei browser che supportano HTML5 dovrebbe supportare: http://dev.w3.org/html5/markup/input. range.html

7
Rahul

Qual è lo scopo?

Se fosse relativo alla contabilità/matematica/numeri, suggerirei un moltiplicatore. Quindi vedi una "x 50" e mostra il totale. Se si tratta di incrementi di 50 per un'applicazione logica, perché non utilizzare semplicemente "incrementi di 50"?

4
Susan R

Penso che sia meglio usare un cursore range come suggerito da altri. Oppure puoi usare una funzione Completamento automatico in una casella di input che visualizzerà il suggerimento quando l'utente inizia a digitare. Ecco l'esempio del browser incrociato per entrambi questi metodi.

Dispositivo di scorrimento: http://jqueryui.com/demos/slider/#range

Completamento automatico: http://jqueryui.com/demos/autocomplete/

Dipende molto anche dai valori min e max.

Ho usato solo un normale elenco di selezione per mostrare i possibili valori. E un'altra soluzione è mostrare semplicemente il totale in modo semplice, in modo che l'utente possa inserire il moltiplicatore, ma vedere comunque il risultato.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

1
Nick P