Typ wejścia HTML5 = zmiana kroku zmiany numeru

Question

Jeśli używam pola wejściowego typu = "liczba" z krokiem = "100". Nie chcę, aby liczby nieparzyste były nieprawidłowe. Chcę tylko zwiększenie lub zmniejszenie się z wartością 1000.

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

Jeżeli użytkownik wprowadzi wartość „199” i twierdzi, on/ona robi błąd, ponieważ wartość ta nie jest podzielna przez 100. Ale wszystko, czego chcę z wartością kroku, to kontrolować zachowanie przędzarki, np. jeśli użytkownik kliknie w górę Chcę, aby wartość 199 stała się 200, a jeśli kliknie w dół, chcę, aby stała się 100. Lub najlepiej chciałbym, aby wartość została zwiększona lub zmniejszona o wartość 100.

Jak czy to zrobię? Próbowałem przy użyciu nieprawidłowej zdarzenie (z jQuery 1.7.2) tak:

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

Ale to efekty w postaci nie są złożone.

PS .: To jest w Google Chrome 20.0.1132.57 na Fedorze 16.

Answer 1

Nie sądzę, może ty, step i walidacja są closely tied together. W przyszłości możesz być w stanie zastąpić stepUp() and stepDown() functions, aby uzyskać opisane zachowanie, ale nie zbadałem, czy jest to zamierzony przypadek użycia dla tych rzeczy. Polecam opublikować na WHATWG mailing list, pytając o te funkcje i opisując przypadek użycia.

Do celów praktycznych próbujesz ustawić step=1 i powiązać ze zdarzeniem click w celu przechwytywania? Widzę, że prawdopodobnie wystąpi problem z rozróżnianiem kliknięć "w górę" i "w dół", ale może to być możliwe do pokonania. Jednak na początku może być łatwiej używać wejścia text, odpowiednio ustawić atrybut pattern i zaimplementować własny spinner.

Answer 2

Tylko kroku, ale można użyć zakresu i dodać znaczniki do slider

jak

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

następnie użyć javascript, aby sprawdzić w pobliżu wartości i ustawić go

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