Циклическое числовое поле в html

Question

Я хочу, чтобы мое числовое поле в html возвращалось к минимальному значению, как только максимальный предел превышен, увеличивая его или наоборот. Поле, в котором я сейчас пытаюсь, является числом с min и max. Это не позволяет пользователю увеличивать или уменьшать пределы, не соответствующие моим требованиям.

Answer 1

Попробуйте виджет Spinner от 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>