Html 和 javascript 输入验证

Question

I am trying to have my input only accept Numbers and the '.', it is working great but it doesn't allow for number pad number keys. I cant seem to find the exact answer online.

HTML

<input type="text" id="ItemTotal#i#" name="ItemTotal#i#" value="#qPriceAct#" onkeypress="return isNumeric(event)" onkeydown="return keyispressed(event);">

JavaScript

//prevent , and $ from being input
function keyispressed(e){
    var charval= String.fromCharCode(e.keyCode);
    if(isNaN(charval) && (e.which != 8 ) && (e.which != 190 )){
        return false;
    }
    return true;
}


//is input numeric
function isNumeric (evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode (key);
  var regex = /[0-9]|\./;
  if ( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Thanks for the help!

Answer 1

The best way I believe would be to add a class to all the inputs that only allow numbers. Then you can restrict any input that doesn't match the pattern or a number/decimal.

 function numberVerfication(value) { var pattern=/^[0-9]*(\\.)?[0-9]*$/; if (value.match(pattern) != null){ return value } else { var p=/[0-9]*(\\.)?[0-9]*/; return value.match(p)[0]; } } $('.numbersOnly').keyup(function(e) { e.target.value = numberVerfication(e.target.value); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class='numbersOnly' type="text" id="ItemTotal#i#" name="ItemTotal#i#" value="#qPriceAct#">

Answer 2

Simple using REGEXP

HTML

<input type="text" class='numbersOnly' id="ItemTotali" name="ItemTotal#i" value="qPriceAct">

JQUERY

$('.numbersOnly').keyup(function (e) {
    this.value = this.value.replace(/[^0-9\.]/g, '');
});

JAVA SCRIPT

function numValidate(that){
  that.value = that.value.replace(/[^0-9\.]/g, '');  
}

<input type="text" onkeypress='numValidate(this)' onkeyup='numValidate(this)' class='numbersOnly' id="ItemTotali" name="ItemTotal#i" value="qPriceAct"/>

Demo

Answer 3

 function numberVerfication(value){ return value.replace(/[^0-9.\\-+]/g, ''); } $('.numbersOnly').keyup(function(e){ e.target.value=numberVerfication(e.target.value); });