如何反向增加或减少 Html5 数字微调器？答案

【问题标题】：How to reverse increase or decrease Html5 number spinner?如何反向增加或减少 Html5 数字微调器？
【发布时间】：2020-07-09 08:03:05
【问题描述】：

我的表单优先级字段中有一个字段可以提交自己onchange。

我想反转微调器控件的方向。因此，如果他们按下向上箭头，它会减少而不是增加字段值。如果他们按下向下箭头，它会增加而不是减少字段值。

我已尝试制作step= '-1'，但根据 html5 文档，这是不允许的，并且不起作用。

<input type="number" name="priority" value='5' onClick="this.select();"  min="1" step="1" max="10" onChange="javascript:submitForm('frm_tosubmit')" required="true">

【问题讨论】：

标签： html numbers spinner reverse

【解决方案1】：

如果 jQuery UI 是一个选项，它的Spinner 类支持负步骤。

$("#input").spinner({
  step: -1,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<label>jQuery UI <input id="input" value="5"></label>
<br>
<label>HTML5 number <input type="number" value="5"></label>

虽然我仍然希望看到没有 jQuery UI 的解决方案。

【讨论】：