input validation y limite

by jpeter06

HTML

<input type="text" id="input0"></input>
<input type="text" id="input"></input>
<input type="text" id="input2"></input>
<table style="text-align:right; width:200px;border:1px solid gray;">
  <tr><td>1234,233</td></tr>
  <tr><td>33334</td></tr>
  <tr><td>33434</td></tr>
</table>

CSS

.bgred{
  background: #Faa;
}

.bggreen{
  background: #aFa;
}

JavaScript

var input = document.getElementById("input");

input.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    var charStr = String.fromCharCode(charCode);
    if (!(/[0-9.,]/.test(charStr)))
        return false;
};

input.onkeyup = function(evt) {
    evt = evt || window.event;
    var value=evt.target.value;
  	if(/^[0-9]+[.,]?[0-9]*$/.test(value)){
    	evt.target.classList.remove("bgred")	
  	}else{
    	evt.target.classList.add("bgred")	
  	}
};

input.onblur=function(evt){
    evt = evt || window.event;
    var value=evt.target.value;
  	if(/^[0-9]+[.,]?[0-9]*$/.test(value)){
    	evt.target.classList.add("bggreen");
      console.log(isNaN(value),Number(value.replace(",",".")))
  	}else{
    	evt.target.focus(); //TODO Confirmar perder valor?
  	}
}
input.onfocus=function(evt){ evt.target.classList.remove("bggreen")}