Como representar uma entrada numérica limitada a incrementos de algum número
Tenho um requisito para um formulário que restrinja um valor de campo a incrementos fixos de 50 e não tenho certeza de qual seria a maneira mais elegante de representar essa restrição de maneira significativa.
A solução mais simples que vem à mente é um método de validação do jQuery combinado com alguma lógica do lado do servidor vinculada a uma entrada normal do campo de texto. Outras alternativas que vêm à mente são um selecionador de números de algum tipo (não conheço um atualmente) que avança em incrementos definidos ou em uma lista suspensa com um número fixo de valores.
Alguma outra ideia? O que seria mais intuitivo para você?
Eu sugeriria o uso do método implementado no Safari for HTML5. Como você pode ver aqui , há novos tipos de entrada no HTML5 que também têm novos atributos. Nesse caso, você usaria um tipo de número de entrada com um atributo chamado "etapa". O código ficaria assim:
<input type="number" step="50" min="0" name="some_name" value="0" id="some_name" />
No momento, não existem muitos navegadores que façam algo com isso. No entanto, se você visualizar esse código no Safari (usando um doctype HTML5), o que verá é um campo de entrada de texto normal com um controle no lado que fornece setas para cima/para baixo que incrementam o valor dentro do campo pelo valor "step" você atribuiu.
Portanto, para um elemento de interface do usuário, eu replicaria isso para navegadores que ainda não o suportam, uma seta para cima/para baixo ao lado do campo de entrada. Para que os usuários saibam que você espera um valor específico, basta escrever "digite um múltiplo de 50. ex: 0, 50, 100, 150 etc." Obviamente, você precisará de um código do lado do cliente ou do servidor para validar se o número digitado está dentro desses intervalos.
Use um controle deslizante. A maioria das bibliotecas da interface do usuário oferece controles deslizantes e geralmente oferece a opção de definir uma 'etapa', como 50, limitando a seleção a qualquer múltiplo desse valor.
Se você estiver usando HTML5, a tag de entrada possui um tipo "range" (incluindo um atributo step) que a maioria dos navegadores que suportam HTML5 deve suportar: http://dev.w3.org/html5/markup/input. range.html
Qual é o propósito?
Se estiver relacionado a contabilidade/matemática/números, sugiro um multiplicador. Então você vê um "x 50" e ele exibe o total. Se houver incrementos de 50 para um aplicativo lógico, por que não usar apenas "incrementos de 50"?
Eu acho que é melhor usar um range slider como sugerido por outros. Ou você pode usar um recurso Preenchimento automático em uma caixa de entrada que exibirá a sugestão quando o usuário começar a digitar. Aqui está o exemplo de navegador cruzado para esses dois métodos.
Slider: http://jqueryui.com/demos/slider/#range
Preenchimento automático: http://jqueryui.com/demos/autocomplete/
Realmente depende também dos valores mínimo e máximo.
Usei apenas uma lista de seleção regular para mostrar os valores possíveis. E outra solução é apenas mostrar o total de uma maneira simples, para que o usuário possa inserir o multiplicador, mas ainda assim ver o resultado.
baixar fonte bmml - Wireframes criados com Balsamiq Mockups
