如何反向增加或减少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 的解决方案。

Answer 2

我遇到了同样的问题，JQuery 对我来说不是一个选择。经过一番尝试和失败后，我最终覆盖了该输入的默认按键操作。

假设这个元素有一个id，或者可以识别的东西。

在我的例子中，它在 Html 中定义为：

<input type="number" step="1" id="time">

因此我的javascript代码是：

var timeInput= document.getElementById( 'time' )

timeInput.addEventListener('keydown', function(e) {
    // Prevent default action for up and down keys
    if (e.key === 'ArrowUp') {
        e.preventDefault();
        timeInput.stepDown(); // Decrease value on up arrow
    } else if (e.key === 'ArrowDown') {
        e.preventDefault();
        timeInput.stepUp(); // Increase value on down arrow
    }
});

我不需要鼠标滚轮，所以它被忽略，但同样的想法也会以这种方式进行：为鼠标滚动注册一个事件侦听器，覆盖默认操作，并提供相反的操作。