Javascript表单输入值与输入最大值比较

Question

我有一个<form>，我试图比较input 的value 和max，以便如果value 超过max，我会应用不同的样式到输入（如红色边框）。假设我有这样的输入：

<input id="inp_1" type="text" numeric-only="" max="50">

假设我有三个输入值（9、49 和 59）。我一会儿再回来。

这是我的 js 代码，它获取输入并检查 value 和 max：

var activeInpId = document.activeElement.id;
var activeInpVal = document.activeElement.value;
var activeInpMax = document.activeElement.max;
var pickElement = document.getElementById(activeInpId);
//console 1
console.log("The entered value is (" + activeInpVal + ") and it's max is (" + activeInpMax + ")");

if( activeInpVal > activeInpMax ){
   //console 2
   console.log("Error. Value (" + activeInpVal + ") exceeds max (" + activeInpMax + ")");

   pickElement.style.border = '2px solid';
   pickElement.style.outline = 'none';
   pickElement.style.borderColor = '#E60000';
   pickElement.style.boxShadow = '0 0 10px #E60000';
}else{
   console.log("Current value in range");

   pickElement.style.border = '';
   pickElement.style.outline = '';
   pickElement.style.borderColor = '';
   pickElement.style.boxShadow = '';
}

问题

现在，当我输入输入值 49 或 59 时，一切正常 但是 9 是一个错误。这是所有 3 个场景的屏幕截图。

此外，上面代码中的控制台消息输出

The current value in focus is (9) and it's max is (50) 用于控制台 1，并且

Error. Value (9) exceeds max (50) 用于控制台 2。

我可能遗漏了什么或做错了什么？

Answer 1

您需要将字符串解析为整数才能使用> 进行比较

var inputs = document.querySelector(".input");
inputs.addEventListener("input", validate, false);

function validate(){
  addEventListener("input", function() {
    var activeInpId = document.activeElement.id;
    var activeInpVal = document.activeElement.value;
    var activeInpMax = document.activeElement.max;
    var pickElement = document.getElementById(activeInpId);
    //console 1
    console.log("The entered value is (" + activeInpVal + ") and it's max is (" + activeInpMax + ")");
    console.log(typeof activeInpVal);
    console.log(typeof activeInpMax);
    if (parseInt(activeInpVal) > parseInt(activeInpMax)) {
      //console 2
      console.log("Error. Value (" + activeInpVal + ") exceeds max (" + activeInpMax + ")");

      pickElement.style.border = '2px solid';
      pickElement.style.outline = 'none';
      pickElement.style.borderColor = '#E60000';
      pickElement.style.boxShadow = '0 0 10px #E60000';
    } else {
      console.log("Current value in range");

      pickElement.style.border = '';
      pickElement.style.outline = '';
      pickElement.style.borderColor = '';
      pickElement.style.boxShadow = '';
    }
  });
}

<input class="input" id="inp_1" type="text" numeric-only="" max="50">
<input class="input" id="inp_1" type="text" numeric-only="" max="50">
<input class="input" id="inp_1" type="text" numeric-only="" max="50">
<input class="input" id="inp_1" type="text" numeric-only="" max="50">
<input class="input" id="inp_1" type="text" numeric-only="" max="50">
<input class="input" id="inp_1" type="text" numeric-only="" max="50">
<input class="input" id="inp_1" type="text" numeric-only="" max="50">

Answer 2

所以这里的概念是如果我们这样做

console.log( '9' > '50'); //logs true
console.log( 9 > 50);    //logs false

因此，您只需在比较之前将类型转换为整数即可。

Answer 3

只需将 parseInt 放在您的 if 条件中，例如

if( parseInt(activeInpVal) > parseInt(activeInpMax) )

它工作正常。