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

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

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

語法

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

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

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