Comment représenter une entrée numérique limitée à des incréments d'un certain nombre
J'ai besoin d'un formulaire qui limite une valeur de champ à des incréments fixes de 50 et je ne sais pas quelle serait la façon la plus élégante de représenter cette contrainte de manière significative.
La solution la plus simple qui vient à l'esprit est une méthode de validation jQuery combinée à une logique côté serveur liée à une entrée de champ de texte normale. D'autres alternatives qui me viennent à l'esprit sont un sélecteur de nombres quelconque (je n'en connais pas actuellement) qui avance par incréments définis ou une liste déroulante avec un nombre fixe de valeurs.
D'autres idées? Qu'est-ce qui vous semblerait le plus intuitif?
Je suggère d'utiliser la méthode implémentée dans Safari pour HTML5. Comme vous pouvez le voir ici il existe de nouveaux types d'entrée en HTML5 qui ont également de nouveaux attributs. Dans ce cas, vous utiliseriez un type de numéro d'entrée avec un attribut appelé "étape". Le code ressemblerait à ceci:
<input type="number" step="50" min="0" name="some_name" value="0" id="some_name" />
À l'heure actuelle, il n'y a pas beaucoup de navigateurs qui font quoi que ce soit avec cela. Cependant, si vous affichez ce code dans Safari (en utilisant un doctype HTML5), ce que vous voyez est un champ de saisie de texte normal avec un contrôle sur le côté qui fournit des flèches haut/bas qui incrémentent la valeur à l'intérieur du champ de la valeur "step" vous avez attribué.
Donc, pour un élément d'interface utilisateur, je reproduirais cela pour les navigateurs qui ne le prennent pas encore en charge, une flèche haut/bas à côté du champ de saisie. Pour faire savoir aux utilisateurs que vous attendez une valeur spécifique, vous pouvez simplement écrire "veuillez saisir un multiple de 50. ex: 0, 50, 100, 150, etc." Ensuite, évidemment, vous aurez besoin d'un code côté client ou côté serveur pour valider que le nombre entré se trouve dans ces plages.
Utilisez un curseur. La plupart des bibliothèques d'interface utilisateur offrent des contrôles de curseur et vous donnent généralement la possibilité de définir une "étape", telle que 50, limitant la sélection à n'importe quel multiple de cette valeur.
Si vous utilisez HTML5, la balise d'entrée a un type "plage" (y compris un attribut step) que la plupart des navigateurs prenant en charge HTML5 doivent prendre en charge: http://dev.w3.org/html5/markup/input. range.html
Quel est le but?
Si c'était lié à la comptabilité/mathématiques/nombres, je suggérerais un multiplicateur. Vous voyez donc un "x 50" et il affiche le total. S'il s'agit d'un incrément de 50 pour une application logique, pourquoi ne pas simplement utiliser des "incréments de 50"?
Je pense qu'il est préférable d'utiliser un curseur de plage comme suggéré par d'autres. Ou vous pouvez utiliser une fonction Autocomplete dans une zone de saisie qui affichera la suggestion lorsque l'utilisateur commencera à taper. Voici l'exemple de navigateur croisé pour ces deux méthodes.
Curseur: http://jqueryui.com/demos/slider/#range
Saisie semi-automatique: http://jqueryui.com/demos/autocomplete/
Cela dépend également des valeurs min et max.
J'ai utilisé juste une liste de sélection régulière pour montrer les valeurs possibles. Et une autre solution consiste à simplement afficher le total de manière simple, afin que l'utilisateur puisse entrer le multiplicateur lui-même, mais toujours voir le résultat.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
