Tipo di input HTML5 = comportamento del passaggio al cambiamento di numero

Question

Se utilizzo un campo di input di type = "number" con step = "100". Non voglio che i numeri dispari non siano validi. Voglio solo aumentare o diminuire di essere con un valore di 1000.

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

Se l'utente immette il valore "199" e sostiene, lui/lei ottiene un errore perché il valore non è divisibile per 100. Ma tutto quello che voglio con il valore di passo è controllare il comportamento della filatrice, ad es. se l'utente fa clic su Voglio che il valore 199 diventi 200 e se lui/lei fa clic giù voglio che diventi 100. O idealmente vorrei che il valore fosse aumentato o diminuito con un valore di 100.

Come faccio questo? Ho provato ad utilizzare l'evento non valido (con jQuery 1.7.2) come questo:

$("[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; 
    } 
}); 

Ma questo si traduce nella forma, non di essere presentati.

PS .: Questo è in Google Chrome 20.0.1132.57 su Fedora 16.

Answer 1

Non credo che si può, il step e la convalida sono closely tied together. In futuro potresti essere in grado di ignorare lo stepUp() and stepDown() functions per ottenere il comportamento che descrivi ma non ho studiato se si tratta di un caso d'uso previsto per queste cose. Suggerirei di postare su WHATWG mailing list, chiedendo specificatamente tali funzioni e descrivendo il tuo caso d'uso.

Per gli attuali scopi pratici, si è tentato di impostare step=1 e associare a un evento click da acquisire? Vedo che probabilmente ci sarà un problema con la distinzione tra clic "su" e "giù", ma che potrebbe essere superabile. Tuttavia, potrebbe essere più semplice utilizzare un input text, impostare l'attributo pattern in modo appropriato e implementare la propria casella di selezione.

Answer 2

Solo con il passaggio, ma è possibile utilizzare gamma e aggiungere segni di slider

come

<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> 

quindi utilizzare javascript per controllare il valore vicino e impostarlo

<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>