如何在HTML中在一個range輸入框內使用不同的step屬性？

允許的數值區間由HTML輸入型別的step屬性決定。步長是數值步長，例如0, 2, 4, 6, 8等等。要構建有效的數值範圍，請將step屬性與max和min屬性結合使用。

它們在一個範圍內建立一個步長間隔，透過左右移動滑塊或上下移動微調器來執行。如果沒有明確說明，則會為各種輸入值分配預設步長。

語法

<input type="type name" step="number">

不同輸入值的預設步長值如下所示：

輸入型別 值 示例
日期 (date) 1天 <input type="date" min="2019-12-25" step="1">
月份 (month) 1個月 <input type="month" min="2019-12" step="12">
星期 (week) 1周 <input type="week" min="2019-W23" step="2">
時間 (time) 60秒 <input type="time" min="09:00" step="900">
本地日期時間 (datetime-local) 1秒 <input type="datetime-local" min="2019-12-25T19:30" step="7">
數字 (number) 1 <input type="number" min="0" step="0.1" max="10">
範圍 (range) 1 <input type="range" min="0" step="2" max="10">

我們將使用jQuery在一個HTML range輸入框中提供不同的step屬性。以下是示例……

示例

在下面的示例中，我們建立了不同的步長，如果值小於1995，則將currentstep設定為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)。

更新於：2022年9月2日

瀏覽量 1K+

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.