Tipo de entrada HTML5 = comportamiento de paso de cambio de número

Si uso un campo de entrada de tipo = "número" con paso = "100". No quiero que los números impares sean inválidos. sólo quiero aumentar o disminuir para estar con un valor de 1000.Tipo de entrada HTML5 = comportamiento de paso de cambio de número

<input type="number" min="100" max="999999" step="100" />

Si el usuario introduce el valor "199" y se somete, él/ella recibe un error porque el valor no es divisible por 100. Pero todo lo que quiero con el valor de paso es controlar el comportamiento de la ruleta, por ejemplo si el usuario hace clic arriba quiero que el valor 199 se convierta en 200 y si hace clic abajo quiero que se convierta en 100. O idealmente me gustaría que el valor se aumente o disminuya con un valor de 100.

Cómo ¿Hago esto? He intentado utilizar el evento no válido (con jQuery 1.7.2) así:

$("[type='number']").bind('invalid', function(e) { 
    var el = $(this), 
     val = el.val(), 
     min = el.attr('min'), 
     max = el.attr('max'); 

    if (val >= min && val <= max) { 
     return false; 
    } 
});

Pero esto se traduce en el formulario no se envía.

PS .: Esto está en Google Chrome 20.0.1132.57 en Fedora 16.

Fuente

2012-07-31 mabs

no estoy Seguro que vas a ser capaz de evitar esto. Es posible que desee considerar el uso del direccionador de jQuery UI en su lugar (http://tjvantoll.com/2012/07/15/native-html5-number-picker-vs-jquery-uis-spinner-which-to-use/). –

También esto podría ser útil - http://stackoverflow.com/questions/3090369/disable-validation-of-html5-form-elements. –

No creo que se pueda, la step y la validación son closely tied together. En el futuro, es posible que pueda anular el stepUp() and stepDown() functions para obtener el comportamiento que describe, pero no he investigado si este es un caso de uso previsto para estas cosas. Recomendaría publicar en el WHATWG mailing list, preguntando específicamente sobre esas funciones y describiendo su caso de uso.

¿Para propósitos prácticos actuales ha intentado configurar step=1 y vinculando a un evento click para capturar? Veo que probablemente habrá un problema para distinguir entre clics 'arriba' y 'abajo', pero eso podría ser superable. Sin embargo, podría ser más fácil usar una entrada text, configurar el atributo pattern de manera adecuada e implementar su propio control giratorio.

Fuente

2012-07-31 13:45:56 robertc

Sólo con el paso pero se puede utilizar y añadir marcas de gama a la corredera

como

<input type='range' min ='0' max='50' step='1' name='slide' list="settings" onchange="updateTextInput(this.value);"> 
<datalist id="settings"> 
<option>15</option> 
<option>20</option> 
<option>26</option> 
<option>36</option> 
<option>50</option> 
</dataList>

luego usar JavaScript para comprobar el valor y la puso cerca

<script type="text/javascript"> 
function updateTextInput(val) { 
if(val>1) 
     document.getElementById('textInput').value=15; 
if(val>15) 
     document.getElementById('textInput').value=20; 
if(val>20) 
     document.getElementById('textInput').value=26; 
//... 
    } 
    </script>

Fuente

2014-07-31 15:01:40

Tipo de entrada HTML5 = comportamiento de paso de cambio de número

Respuesta

Cuestiones relacionadas