如何覆盖HTML5输入数字的步进功能？ 使用jQuery

Question

我想更改Webapp的HTML5数字输入上的步骤。 我想要100 x 100，而不是1 x 1。

我已经试过了：

$("#mynumberinput").keydown(function(e){
    if (e.keyCode == 38) // Arrow-Up
    {
      $(this).val(parseInt($(this).val() + 100));
    }
    if (e.keyCode == 40) // Arrow-Down
    {
      $(this).val(parseInt($(this).val() - 100));
    }
});

但是没有用。 我该如何实现？

Answer 1

更改元素本身的step属性：

 <input type="number" step="100" /> 

或者，如果您不能直接修改HTML，则可以使用jQuery的attr方法进行此操作：

$("#mynumberinput").attr('step', 100);

---

似乎实际的问题是您要允许用户输入数字， 然后将其增加或减少100。当前代码的问题是，您没有将值转换为数字，因此遇到了什么问题。被称为字符串连接 。 要解决此问题，只需在增加或减小值之前将它们转换为数值：

 $('input').on('keyup', function(e) { if (e.which === 38) this.value = +this.value + 99; else if (e.which === 40) this.value = +this.value - 99; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" /> 

请注意，我使用的是99而不是100。这也允许浏览器对其进行初始处理。如果您的step值不为1 ，则需要自己抵消。

Answer 2

我认为输入步骤的答案是正确的，但是对于JQuery，我认为您应该只在val上使用parseInt，然后在THEN上减去。

$(this).val(parseInt($(this).val()) - 100);