如何在 HTML 中为一个范围输入框使用不同的 step 属性?

front end technologyhtmlweb development更新于 2025/4/4 10:52:17

允许的数字间隔由 HTML 输入框类型的 step 属性决定。step 属性是数值步长，例如 0、2、4、6、8 等等。要构建有效值范围，请将 step 属性与 max 和 min 属性结合使用。

它们在范围内建立步进间隔，该间隔通过左右移动滑块或上下移动旋转器来执行。如果没有明确说明，则会为各个输入值分配默认步长。

语法

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

不同输入值的默认步长值如下:

输入类型	值	示例
date	1 day	<input type="date" min="2019-12-25" step="1">
month	1 month	<input type="month" min="2019-12" step="12">
week	1 week	<input type="week" min="2019-W23" step="2">
time	60 seconds	<input type="time" min="09:00" step="900">
datetime-local	1 second	<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 中为一个范围输入框提供不同的 step 属性。以下是示例……

示例

在下面的示例中，我们创建了不同的 step，如果值为 <1995，则将 currentstep 设置为 20，如果值为 1995，则将其他 step 设置为 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>