it-swarm-es.com

Cómo representar una entrada numérica que se limita a incrementos de algún número

Tengo un requisito para un formulario que restrinja un valor de campo a incrementos fijos de 50 y no estoy seguro de cuál sería la forma más elegante de representar esa restricción de manera significativa.

La solución más simple que viene a la mente es un método de validación jQuery combinado con alguna lógica del lado del servidor que está vinculada a una entrada de campo de texto normal. Otras alternativas que se me ocurren es un selector de números de algún tipo (no sé uno actualmente) que avance en incrementos establecidos o una lista desplegable con un número fijo de valores.

¿Alguna otra idea? ¿Qué te parecería más intuitivo?

14
Nathan Taylor

Sugeriría usar el método implementado en Safari para HTML5. Como puede ver aquí hay nuevos tipos de entrada en HTML5 que también tienen nuevos atributos. En este caso, estaría utilizando un tipo de entrada de número con un atributo llamado "paso". El código se vería así:

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

En este momento no hay muchos navegadores que hagan algo con esto. Sin embargo, si ve ese código en Safari (usando un doctype HTML5), lo que ve es un campo de entrada de texto normal con un control en el lado que proporciona flechas arriba/abajo que incrementan el valor dentro del campo en el valor "paso" usted asignó.

Entonces, para un elemento de la interfaz de usuario, replicaría eso para los navegadores que aún no lo admiten, una flecha arriba/abajo al lado del campo de entrada. Para que los usuarios sepan que espera un valor específico, puede escribir "ingrese un múltiplo de 50. ej .: 0, 50, 100, 150, etc." Entonces, obviamente, necesitará un código del lado del cliente o del lado del servidor para validar que el número ingresado está dentro de esos rangos.

9
RussellUresti

Usa un control deslizante. La mayoría de las bibliotecas de IU ofrecen controles deslizantes y generalmente le dan la opción de definir un 'paso', como 50, limitando la selección a cualquier múltiplo de ese valor.

Si está utilizando HTML5, la etiqueta de entrada tiene un tipo de "rango" (incluido un atributo de paso) que la mayoría de los navegadores que admiten HTML5 deberían admitir: http://dev.w3.org/html5/markup/input. range.html

7
Rahul

¿Cuál es el propósito?

Si se tratara de contabilidad/matemáticas/números, sugeriría un multiplicador. Entonces ves un "x 50" y muestra el total. Si se trata de incrementos de 50 para una aplicación lógica, ¿por qué no usar simplemente "incrementos de 50"?

4
Susan R

Creo que es mejor usar un deslizador de rango como lo sugieren otros. O puede usar una función ¡Autocompletar en un cuadro de entrada que mostrará la sugerencia cuando el usuario comience a escribir. Aquí están los ejemplos de navegador cruzado para ambos métodos.

Control deslizante: http://jqueryui.com/demos/slider/#range

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

1

Realmente depende de los valores mínimos y máximos también.

Solo he usado una lista de selección regular para mostrar los posibles valores. Y otra solución es mostrar el total de una manera simple, para que el usuario pueda ingresar el multiplicador por sí mismo, pero aún así ver el resultado.

mockup

descargar fuente bmml - Wireframes creados con Balsamiq Mockups

1
Nick P