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

HTML输入类型step属性设置合法编号间隔。步骤是数字步骤，例如0、2、4、6、8、10等。step属性可以与max和min属性一起使用以创建一系列合法值。

要在HTML的一个范围输入中使用不同的step属性，我们将使用JavaScript。首先，让我们看看如何使用step属性。

您可以尝试运行以下代码来创建带有输入step属性的数字台阶。在这里，我们正在创建第2步，因此有效输入将为2、4、6、8、10等。在输入数字并按“提交”按钮后，将显示以下消息：“请输入有效的值”。它还将使您知道两个最接近的值。

示例

<!DOCTYPE html>
<html>
   <head>
      <title>HTML input step attribute</title>
   </head>
   <body>
      <form action = "/cgi-bin/hello_get.cgi" method = "get">
         <input type = "number" name = "points" step = "2"><br>
         <input type = "submit" value = "Submit">
      </form>
   </body>
</html>

我们将使用jQuery在HTML的一个范围输入中提供不同的step属性。在这里，我们添加了两个步骤，即10和2。这里的范围是100到450，在min和max属性下设置。

示例

<html>
   <head>
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">
      </script>
      <script type="text/javascript">
         $(function() {
            $('#points').on('input change', function() {
               var element = $('#points'),
               value = element.val(),
               step;
               //在这里设置规则
               if (value < 205) {
                  step = 10;
               }else {
                  step = 2;
               }
               element.attr('step', step);
               $('#value').text(value);
               $('#step').text(step);
            });
         });
      </script>
   </head>

   <body>
      <div>
         Value: <span id="value"></span>
      </div>
      <div>
         Current step: <span id="step"></span>
      </div>
      <div>
         <input id="points" type="range" value="100" min="100" max="450" />
      </div>
   </body>
</html>

基础教程