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

Question

我有一个 <form>我正在尝试比较 value和 max的 input这样如果 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

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

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

所以您需要做的就是在比较之前将值强制转换为整数。