如何反转增加或减少Html5数值微调器？

Question

我的表单优先级字段中有一个字段提交了自己的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">

Answer 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的解决方案。