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

Question

我想更改我的网络应用程序 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，然后减去。

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

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

How to override HTML5 input number step function? Using jQuery

html

javascript

jquery

keycode

keydown