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

【问题标题】：How to override HTML5 input number step function? Using jQuery如何覆盖 HTML5 输入数字步进功能？使用 jQuery
【发布时间】：2016-10-12 15:09:41
【问题描述】：

我想更改我的 web 应用的 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));
    }
});

但是没有用。我怎样才能做到这一点？

【问题讨论】：

<input type="number" step="100" id="mynumberinput" />怎么样
"但是 [it] 没用" 是怎么回事？它是如何“出错”的？是否有任何错误信息？你的相关 HTML 是什么？

标签： javascript jquery html keydown keycode

【解决方案1】：

更改元素本身的step 属性：

&lt;input type="number" step="100" /&gt;

或者如果不能直接修改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，您需要自己抵消它。

【讨论】：

不可能！ step="100" 谢谢！我会标记为正确答案！
我在推测（而且问题非常模糊），但 OP 可能希望以 100 为增量调整输入的值。例如，如果您输入 @987654330 @ 然后单击向上箭头微调器，值将更改为 200 而不是 220。但显然不是（鉴于他上面的评论）。 :)
要“解决它”，您首先需要花时间定义您遇到的问题，并回答我在 cmets 中向您提出的问题。我们不确定您想要什么，或者您的具体问题是什么，因为您没有对此进行任何解释。您只是向我们展示了一些代码并说它“不起作用”而没有准确地告诉我们它应该做什么。 James 对您的问题进行了猜测，您似乎对此很满意，但如果您需要“更多”，您首先需要解释问题是什么，以及您想要和需要什么。
@alessadro 我已经修改了我的答案，以包括大卫提出的情况。如果这不是您的问题，请说明问题到底是什么，您尝试了什么以及预期的结果是什么。
@JamesDonnelly 你修好了！那是！并原谅我糟糕的英语x（

【解决方案2】：

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

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

【讨论】：

感谢您的信息！ +1