允許的數字間隔由 HTML 輸入類型步驟屬性確定。步驟是數字步驟,例如 0、2、4、6、8 等。要構造有效值范圍,請將 step 屬性與 max 和 min 屬性結合起來。
它們在一定范圍內建立步進間隔,通過從左向右移動滑塊或上下移動微調器來執行該步進間隔。如果沒有明確提及,默認步驟將分配給各種輸入值。
語法
<input type="type name" step="number">
登錄后復制
不同輸入值的默認步長值如下 –
輸入類型 | 值 | 示例 |
---|---|---|
日期 | 1天 | |
月 | 1個月 | |
周 | 1周 | |
時間 | 60 秒 | |
本地日期時間 | 1秒 | |
數字 | 1 | |
范圍 | 1 |
我們將使用 jQuery 在 HTML 的一個范圍輸入中提供不同的步驟屬性。以下是示例…
示例
在下面的示例中,我們創建了不同的步驟,如果值為 <1995,則將當前步驟設置為 20,將其他步驟設置為 1。
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script> $(function() { $('#years').on('input change', function() { var element = $('#years'), value = element.val(), step; if (value < 1995) { step = 20; } else { step = 1; } element.attr('step', step); $('#value').text(value); $('#step').text(step); }); }); </script> </head> <body> <div> Current value: <span id="value"></span> </div> <div> Current step: <span id="step"></span> </div> <div> <input id="years" type="range" value="1965" min="1965" max="2015" /> </div> </body> </html>
登錄后復制
執行時上面的腳本,將分為兩個步驟。一步為20;范圍是從(1965-1994),另一個是步驟1,范圍是從(1995-2015)。
以上就是如何在HTML中使用不同的步長屬性來使用一個范圍輸入?的詳細內容,更多請關注www.92cms.cn其它相關文章!