javascript - html中的循环数字段

Question

一旦通过递增或其他方式超过最大限制，我想将 html 中的数字字段设置回最小值。我当前正在尝试的字段是带有最小值和最大值的数字。这不会让用户增加或减少超出不满足我的要求的范围。

Answer 1

尝试 JQueryUI 中的微调器小部件。 overflow example网站上的溢出示例中有以下代码:

  $( "#spinner" ).spinner({
        spin: function( event, ui ) {
          if ( ui.value > 10 ) {
            $( this ).spinner( "value", -10 );
            return false;
        } else if ( ui.value < -10 ) {
          $( this ).spinner( "value", 10 );
          return false;
        }
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<p>
  <label for="spinner">Select a value:</label>
  <input id="spinner" name="value">
</p>