HTML5輸入類型=數字更改步驟行爲

如果我使用type =「number」的輸入字段並且step =「100」。我不希望奇數無效。我只是想增加或減少是與1000HTML5輸入類型=數字更改步驟行爲

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

的值。如果用戶輸入的值「199」並提交，他/她會得到一個錯誤，因爲該值不是由100整除。但是，我想要的所有步驟值都是爲了控制微調器的行爲，例如如果用戶點擊，我希望199的值變爲200，如果他/她點擊下來，我希望它變成100.或者理想情況下，我希望值增加或減少爲100的值。

我要這樣做嗎？我嘗試使用無效的事件（用jQuery 1.7.2）所示：

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

但是，這會導致無法提交表單。

PS：這是谷歌瀏覽器20.0.1132.57在Fedora 16

來源

2012-07-31 mabs

我不是確定你將能夠解決這個問題。你可能想考慮使用jQuery UI的微調（http://tjvantoll.com/2012/07/15/native-html5-number-picker-vs-jquery-uis-spinner-which-to-use/）。 – 2012-07-31 14:43:03

另外這可能會有所幫助 - http://stackoverflow.com/questions/3090369/disable-validation-of-html5-form-elements。 – 2012-07-31 14:49:03

我不認爲你可以在step和驗證是closely tied together。在未來，您可能會覆蓋stepUp() and stepDown() functions以獲得您描述的行爲，但我沒有研究過這是否是這些事情的預期用例。我會建議在WHATWG mailing list上發帖，具體詢問這些功能並描述您的使用案例。

對於當前的實際用途，您是否嘗試過設置step=1並綁定到click事件以捕獲？我可以看到，可能會出現區分「向上」和「向下」點擊的問題，但這可能是可以克服的。然而，使用text輸入可能更容易，但適當地設置pattern屬性並實現您自己的微調器。

來源

2012-07-31 13:45:56 robertc

只有一步，但你可以使用範圍，並添加標記，以滑塊

像

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

然後使用JavaScript來檢查接近值，並將其設置

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

來源

2014-07-31 15:01:40

HTML5輸入類型=數字更改步驟行爲

回答

相關問題