设置输入类型=数字的步骤

Question

以下html标记显示一个输入字段，该字段接受一个数字，并提供向上，向下箭头以递增，递减字段值。我所需的输入字段是输入，其中板球的值超过，例如，如果我点击向上箭头，它应该转换为2或2.0而不是1.6

<input type="number" name="overs" step="0.1">

我知道在单击向上和向下箭头时需要执行一些javascript，但我不知道该怎么做。任何人都可以建议如何处理这个箭头点击事件。此外，该字段接受手动输入的数值，同样需要验证以限制板球的无效值，例如：1.8无效。请指导。

Answer 1

添加一个事件监听器（input）并增加整数值，小数值越来越大于或等于0.6

input.addEventListener( "input", function(){
   var value = this.value;
   if ( value - parseInt( value ) >= 0.6 )
   {
      this.value = Math.ceil( value );
   }
})

演示

var input = document.querySelector( "[name='overs']" );

input.addEventListener( "input", function(){
   var value = this.value;
   if ( value - parseInt( value ) >= 0.6 )
   {
      this.value = Math.ceil( value );
   }
})

<input type="number" name="overs" step="0.1">

为了减少过度，请听keyup

注意

• 下面的演示使用向下箭头键，而不是箭头单击。

演示

var input = document.querySelector( "[name='overs']" );

input.addEventListener( "input", function(){
   var value = this.value;
   if ( value - parseInt( value ) >= 0.6 )
   {
      this.value = Math.ceil( value );
   }
});

input.addEventListener( "keyup", function(){
    var value = this.value;
    var step = +this.getAttribute( "step" );
    console.log(event.which);
   if ( event.which == 40 )
   {
      event.preventDefault();
      value = value - step;
      if ( (value - parseInt( value )) >= 0.5 )
      {
         this.value = parseInt( value ) + 0.5;
      }
   }
});

<input type="number" name="overs" step="0.1">

Answer 2

试试这个链接代码

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

 <input type="number" name="quantity" min="1" max="5">

Answer 3

您可以检查分数是否> 0.5并将其舍入：

document.querySelector('.input-round-up').addEventListener('input', function (e) {
  var value = e.target.value;
  var isDecrementing = value < this.__lastValue;
  if ((value % 1) > 0.5 && !isDecrementing) {
    e.target.value = Math.round(value);
  }
  this.__lastValue = value;
});

<input class="input-round-up" type="number" name="overs" step="0.1" />