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

我有一个<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。

我会丢失什么或做错什么？