JavaScript 无法将 input.min、input.max、input.value 识别为整数

Question

我正在一个网站上工作，如果在提交表单之前数字不在最小值和最大值之间，我希望数字输入能够自行更正。我的代码如下:

HTML:

<input type="number" min="0" max="10" step="0.01" onblur="CorrectOverUnder(this)" value="0">

JavaScript:

function CorrectOverUnder(sender){

    if(sender.value < sender.min){

        sender.value = sender.min;

    }else if(sender.value > sender.max){

        sender.value = sender.max;
    }
}

它可以很好地纠正任何超出范围的内容，但它也可以将 2 到 10 之间的任何内容纠正为最大值(即 10)。我尝试通过先检查是否有超过最大值的数字来颠倒案例的顺序，但结果是相同的。我该如何解决这个问题？

编辑: 我最终将 JavaScript 更改为:

function CorrectOverUnder(sender){

    if(parseInt(sender.value) < parseInt(sender.min)){

        sender.value = sender.min;

    }else if(parseInt(sender.value) > parseInt(sender.max)){

        sender.value = sender.max;
    }
}

一切都好，还是这在某种程度上仍然是错误的？

Answer 1

在比较它们之前，您需要将值转换为数字，因为当它们是字符串时，JS 会按字母顺序比较它们，这意味着 "2"> "10"

function CorrectOverUnder(sender)
{
  let value = Number(sender.value);
  let min = Number(sender.min);
  let max = Number(sender.max);

  if(value < min){
    sender.value = min;
  }else if(value > max){
    sender.value = sender.max;
  }
}

<input type="number" min="0" max="10" step="0.01" onblur="CorrectOverUnder(this)" value="0">