HTML input[type=number] : 覆盖箭头行为答案

【问题标题】：HTML input[type=number] : override arrow behaviourHTML input[type=number] : 覆盖箭头行为
【发布时间】：2016-02-11 19:45:42
【问题描述】：

是否可以有一个input 元素，其中type 等于number，其箭头按钮不会通过step 属性更改值，而是通过其他给定数字？

我需要一个步长等于 0.001 的字段，购买我想通过单击箭头进行 +-1 跳跃。（我问的是原生箭头按钮，当然我无论如何都可以模拟它们，但这不是问题。）

【问题讨论】：

标签： html

【解决方案1】：

谷歌搜索首先发现了这个

<input type="number" name="points" min="0" max="100" step="0.001" value="30">

除此之外，我想您还需要使用 JS 来操纵行为。可能是这样的：

<input id="example" type="number" name="points" step="0.001" onchange="checkChangedInput();">
<script>
  function checkChangedInput() {
    // check if number got lower or higher
    ...
    document.getElementById("example").value += OldValuePlusZeroPointNineNineNine;
</script>

虽然我猜想在字段中输入某事时使用 onchange 可能会产生意想不到的结果。因此，您还应该检查 in/decrement 是否超过您的步长（0.001）。

这也可能会产生一些有用的信息：HTML5 input type=number change step behavior

【讨论】：

如果用户将当前值更改 0.001 会怎样？
也许使用 onclick 而不是 onchange... 尝试一下 DOM 在特定元素上为您存储的内容... 甚至可以询问 google...