如何重写HTML5输入数字步进功能？使用 jQuery

Question

我想更改我的网络应用程序的 HTML5 数字输入的步骤。我想要 100 × 100，而不是 1 × 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。当前代码的问题是您没有将值转换为数字，因此您遇到的是称为字符串连接。要解决此问题，只需在增加或减少值之前将它们转换为数值即可：

$("#mynumberinput").attr('step', 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;
});

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