Question

我有一个数字字段，用作数量值，我需要以下格式的值才能被该字段接受。

0.01
0.1
1

所以我这样创建了输入字段：

<input type="number" step=".01">

该字段右侧的箭头和上/下键盘按钮将值增加.01。但是，我需要保持这种精度，但是当用户单击上/下箭头或按上/下键时，我希望该字段以0.5递增/递减，这是更标准的用例。

我确实在input上使用了jQuery侦听器，但是当我直接键入该值时也引起了问题，因为那时触发了侦听器。

Answer 1

基本上，您需要在以下之间更改其set值属性：

<input type="number" step=".01">

和

<input type="number" step=".5"> 用户单击上/下箭头或按上/下键。

因此，我在JavaScript中创建了一个示例来说明这种特殊情况。

类似这样的东西：

(function() {
  var numberFields = document.querySelectorAll("input[type=number]"),
    len = numberFields.length,
    numberField = null;

  for (var i = 0; i < len; i++) {
    numberField = numberFields[i];
    numberField.onclick = function() {
      this.setAttribute("step", ".5");
    };
    numberField.onkeyup = function(e) {
      if (e.keyCode === 38 || e.keyCode === 40) {
        this.setAttribute("step", ".01");
      }
    };
  }
}());

<input type="number" step=".01">

Answer 2

您不能使用数字输入来执行此操作，但是使用文本输入会发生神奇的事情...

我对它进行了一些样式设置，以便您查看它何时有效和无效。

在这里可以使用负数，因此，如果您希望我可以对其进行编辑，但是它在-1到0之间会有点古怪。

lines_to_display

let input = document.getElementById('addNum');
increment = 0.5;

input.onkeydown = function(e){
  if(e.key == "ArrowUp"){
    e.preventDefault();
    let value = +this.value;
    this.value = value + increment;
  } else if(e.key == "ArrowDown"){
    e.preventDefault();
    let value = +this.value;
    this.value = value - increment;
  }
}

input:valid {
  border-color: #0f0;
}
input:invalid {
  border-color: #f00;
}
input {
  outline: none;
}

将HTML5数字字段加.5，步长为.01

2 个答案: