Restricting input to textbox: allowing only numbers and decimal point

JavascriptHtml

Javascript Problem Overview


How can I restrict input to a text-box so that it accepts only numbers and the decimal point?

Javascript Solutions


Solution 1 - Javascript

<HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : evt.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }
       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>

This really works!

Solution 2 - Javascript

The accepted solution is not complete, since you can enter multiple '.', for example 24....22..22. with some small modifications it will work as intended:

<html>

<head>
  <script type="text/javascript">
    function isNumberKey(txt, evt) {
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if (charCode == 46) {
        //Check if the text already contains the . character
        if (txt.value.indexOf('.') === -1) {
          return true;
        } else {
          return false;
        }
      } else {
        if (charCode > 31 &&
          (charCode < 48 || charCode > 57))
          return false;
      }
      return true;
    }
  </script>
</head>

<body>
  <input type="text" onkeypress="return isNumberKey(this, event);" />
</body>

</html>

Solution 3 - Javascript

form.onsubmit = function(){
	return textarea.value.match(/^\d+(\.\d+)?$/);
}

Is this what you're looking for?

I hope it helps.

EDIT: I edited my example above so that there can only be one period, preceded by at least one digit and followed by at least one digit.

Solution 4 - Javascript

Here is one more solution which allows for decimal numbers and also limits the digits after decimal to 2 decimal places.

function isNumberKey(evt, element) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8))
    return false;
  else {
    var len = $(element).val().length;
    var index = $(element).val().indexOf('.');
    if (index > 0 && charCode == 46) {
      return false;
    }
    if (index > 0) {
      var CharAfterdot = (len + 1) - index;
      if (CharAfterdot > 3) {
        return false;
      }
    }

  }
  return true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="rate" placeholder="Billing Rate" required onkeypress="return isNumberKey(event,this)">

Solution 5 - Javascript

All solutions presented here are using single key events. This is very error prone since input can be also given using copy'n'paste or drag'n'drop. Also some of the solutions restrict the usage of non-character keys like ctrl+c, Pos1 etc.

I suggest rather than checking every key press you check whether the result is valid in respect to your expectations.

var validNumber = new RegExp(/^\d*\.?\d*$/);
var lastValid = document.getElementById("test1").value;
function validateNumber(elem) {
  if (validNumber.test(elem.value)) {
    lastValid = elem.value;
  } else {
    elem.value = lastValid;
  }
}

<textarea id="test1" oninput="validateNumber(this);" ></textarea>

The oninput event is triggered just after something was changed in the text area and before being rendered.

You can extend the RegEx to whatever number format you want to accept. This is far more maintainable and extendible than checking for single key presses.

Solution 6 - Javascript

Are you looking for something like this?

   <HTML>
   <HEAD>
   <SCRIPT language=Javascript>
      <!--
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }
      //-->
   </SCRIPT>
   </HEAD>
   <BODY>
      <INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
   </BODY>
  </HTML>

Solution 7 - Javascript

Just need to apply this method in Jquery and you can validate your textbox to just accept number with a decimal only.

function IsFloatOnly(element) {    
var value = $(element).val(); 
var regExp ="^\\d+(\\.\\d+)?$";
return value.match(regExp); 
}

Please see working demo here

Solution 8 - Javascript

here is script that cas help you :

<script type="text/javascript">
// price text-box allow numeric and allow 2 decimal points only
function extractNumber(obj, decimalPlaces, allowNegative)
{
	var temp = obj.value;
	
	// avoid changing things if already formatted correctly
	var reg0Str = '[0-9]*';
	if (decimalPlaces > 0) {
		reg0Str += '\[\,\.]?[0-9]{0,' + decimalPlaces + '}';
	} else if (decimalPlaces < 0) {
		reg0Str += '\[\,\.]?[0-9]*';
	}
	reg0Str = allowNegative ? '^-?' + reg0Str : '^' + reg0Str;
	reg0Str = reg0Str + '$';
	var reg0 = new RegExp(reg0Str);
	if (reg0.test(temp)) return true;

	// first replace all non numbers
	var reg1Str = '[^0-9' + (decimalPlaces != 0 ? '.' : '') + (decimalPlaces != 0 ? ',' : '') + (allowNegative ? '-' : '') + ']';
	var reg1 = new RegExp(reg1Str, 'g');
	temp = temp.replace(reg1, '');

	if (allowNegative) {
		// replace extra negative
		var hasNegative = temp.length > 0 && temp.charAt(0) == '-';
		var reg2 = /-/g;
		temp = temp.replace(reg2, '');
		if (hasNegative) temp = '-' + temp;
	}
	
	if (decimalPlaces != 0) {
		var reg3 = /[\,\.]/g;
		var reg3Array = reg3.exec(temp);
		if (reg3Array != null) {
			// keep only first occurrence of .
			//  and the number of places specified by decimalPlaces or the entire string if decimalPlaces < 0
			var reg3Right = temp.substring(reg3Array.index + reg3Array[0].length);
			reg3Right = reg3Right.replace(reg3, '');
			reg3Right = decimalPlaces > 0 ? reg3Right.substring(0, decimalPlaces) : reg3Right;
			temp = temp.substring(0,reg3Array.index) + '.' + reg3Right;
		}
	}
	
	obj.value = temp;
}
function blockNonNumbers(obj, e, allowDecimal, allowNegative)
{
	var key;
	var isCtrl = false;
	var keychar;
	var reg;
	if(window.event) {
		key = e.keyCode;
		isCtrl = window.event.ctrlKey
	}
	else if(e.which) {
		key = e.which;
		isCtrl = e.ctrlKey;
	}
	
	if (isNaN(key)) return true;
	
	keychar = String.fromCharCode(key);
	
	// check for backspace or delete, or if Ctrl was pressed
	if (key == 8 || isCtrl)
	{
		return true;
	}

	reg = /\d/;
	var isFirstN = allowNegative ? keychar == '-' && obj.value.indexOf('-') == -1 : false;
	var isFirstD = allowDecimal ? keychar == '.' && obj.value.indexOf('.') == -1 : false;
	var isFirstC = allowDecimal ? keychar == ',' && obj.value.indexOf(',') == -1 : false;
	return isFirstN || isFirstD || isFirstC || reg.test(keychar);
}
function blockInvalid(obj)
{
	var temp=obj.value;
	if(temp=="-")
	{
		temp="";
	}
		
	if (temp.indexOf(".")==temp.length-1 && temp.indexOf(".")!=-1)
	{
		temp=temp+"00";
	}
	if (temp.indexOf(".")==0)
	{
		temp="0"+temp;
	}
	if (temp.indexOf(".")==1 && temp.indexOf("-")==0)
	{
		temp=temp.replace("-","-0") ;
	}
	if (temp.indexOf(",")==temp.length-1 && temp.indexOf(",")!=-1)
	{
		temp=temp+"00";
	}
	if (temp.indexOf(",")==0)
	{
		temp="0"+temp;
	}
	if (temp.indexOf(",")==1 && temp.indexOf("-")==0)
	{
		temp=temp.replace("-","-0") ;
	}
	temp=temp.replace(",",".") ;
	obj.value=temp;
}
// end of price text-box allow numeric and allow 2 decimal points only
</script>

<input type="Text" id="id" value="" onblur="extractNumber(this,2,true);blockInvalid(this);" onkeyup="extractNumber(this,2,true);" onkeypress="return blockNonNumbers(this, event, true, true);">

Solution 9 - Javascript

For anyone stumbling here like I did, here is a jQuery 1.10.2 version I wrote which is working very well for me albeit resource intensive:

/***************************************************
* Only allow numbers and one decimal in text boxes
***************************************************/
$('body').on('keydown keyup keypress change blur focus paste', 'input[type="text"]', function(){
    var target = $(this);
    
    var prev_val = target.val();
    
    setTimeout(function(){
        var chars = target.val().split("");
        
        var decimal_exist = false;
        var remove_char = false;
        
        $.each(chars, function(key, value){
            switch(value){
                case '0':
                case '1':
                case '2':
                case '3':
                case '4':
                case '5':
                case '6':
                case '7':
                case '8':
                case '9':
                case '.':
                    if(value === '.'){
                        if(decimal_exist === false){
                            decimal_exist = true;
                        }
                        else{
                            remove_char = true;
                            chars[''+key+''] = '';
                        }
                    }
                    break;
                default:
                    remove_char = true;
                    chars[''+key+''] = '';
                    break;
            }
        });
        
        if(prev_val != target.val() && remove_char === true){
            target.val(chars.join(''))
        }
    }, 0);
});

Solution 10 - Javascript

A small correction to @rebisco's brilliant answer to validate the decimal perfectly.

function isNumberKey(evt) {
	debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode == 46 && evt.srcElement.value.split('.').length>1) {
        return false;
    }
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

Solution 11 - Javascript

If you want it for float values,

Here is the function I am using

<HTML>

<HEAD>
  <SCRIPT language=Javascript>
    <!--
    function check(e, value) {
      //Check Charater
      var unicode = e.charCode ? e.charCode : e.keyCode;
      if (value.indexOf(".") != -1)
        if (unicode == 46) return false;
      if (unicode != 8)
        if ((unicode < 48 || unicode > 57) && unicode != 46) return false;
    }
    //-->
  </SCRIPT>
</HEAD>

<BODY>
  <INPUT id="txtChar" onkeypress="return check(event,value)" type="text" name="txtChar">
</BODY>

</HTML>

Solution 12 - Javascript

  function onlyDotsAndNumbers(txt, event) {
        var charCode = (event.which) ? event.which : event.keyCode
        if (charCode == 46) {
            if (txt.value.indexOf(".") < 0)
                return true;
            else
                return false;
        }

        if (txt.value.indexOf(".") > 0) {
            var txtlen = txt.value.length;
            var dotpos = txt.value.indexOf(".");
            //Change the number here to allow more decimal points than 2
            if ((txtlen - dotpos) > 2)
                return false;
        }

        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

        return true;
    }


<input type="text" id="txtAmount" onkeypress="return onlyDotsAndNumbers(this,event);" maxlength="10" oncopy="return false" ondrag="return false" ondrop="return false" onpaste="return false" />

Only Numbers, One decimal point, No Copy Paste.

Solution 13 - Javascript

inputelement.onchange= inputelement.onkeyup= function isnumber(e){
	e= window.event? e.srcElement: e.target;
	while(e.value && parseFloat(e.value)+''!= e.value){
 	    	e.value= e.value.slice(0, -1);
	}
}

Solution 14 - Javascript

function integerwithdot(s, iid){
		var i;
		s = s.toString();
		for (i = 0; i < s.length; i++){
			var c;
			if (s.charAt(i) == ".") {
			} else {
				c = s.charAt(i);
			}
			if (isNaN(c)) {
				c = "";
				for(i=0;i<s.length-1;i++){
					c += s.charAt(i);
				}
				document.getElementById(iid).value = c;
				return false;
			}
		}
		return true;
	}

Solution 15 - Javascript

Suppose your textbox field name is Income
Call this validate method when you need to validate your field:

function validate() {
    var currency = document.getElementById("Income").value;
      var pattern = /^[1-9]\d*(?:\.\d{0,2})?$/ ;
    if (pattern.test(currency)) {
        alert("Currency is in valid format");
        return true;
    } 
        alert("Currency is not in valid format!Enter in 00.00 format");
        return false;
}

Solution 16 - Javascript

Extending the @rebisco's answer. this below code will allow only numbers and single '.'(period) in the text box.

function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        } else {
            // If the number field already has . then don't allow to enter . again.
            if (evt.target.value.search(/\./) > -1 && charCode == 46) {
                return false;
            }
            return true;
        }
    }

Solution 17 - Javascript

Better solution

var checkfloats = function(event){
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
             
    if(event.target.value.indexOf('.') >=0 && charCode == 46)
        return false;
             
    return true;
}

Solution 18 - Javascript

alternative way to restrict input to a text-box so that it accepts only numbers and the decimal point is to use javascript inside the html input. This works for me:

<input type="text" class="form-control" id="price" name="price" placeholder="Price" 
vrequired onkeyup="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')">

--Accepts--

9

9.99

--Do not accept--

9.99.99

ABC

Solution 19 - Javascript

I chose to tackle this on the oninput event in order to handle the issue for keyboard pasting, mouse pasting and key strokes. Pass true or false to indicate decimal or integer validation.

It's basically three steps in three one liners. If you don't want to truncate the decimals comment the third step. Adjustments for rounding can be made in the third step as well.

// Example Decimal usage;
// <input type="text"  oninput="ValidateNumber(this, true);" />
// Example Integer usage:
// <input type="text"  oninput="ValidateNumber(this, false);" />
function ValidateNumber(elm, isDecimal) {
    try {

        // For integers, replace everything except for numbers with blanks.
        if (!isDecimal) 
            elm.value = elm.value.replace(/[^0-9]/g, ''); 
        else {
            // 1. For decimals, replace everything except for numbers and periods with blanks.
            // 2. Then we'll remove all leading ocurrences (duplicate) periods
            // 3. Then we'll chop off anything after two decimal places.

            // 1. replace everything except for numbers and periods with blanks.
            elm.value = elm.value.replace(/[^0-9.]/g, '');

            //2. remove all leading ocurrences (duplicate) periods
            elm.value = elm.value.replace(/\.(?=.*\.)/g, '');

            // 3. chop off anything after two decimal places.
            // In comparison to lengh, our index is behind one count, then we add two for our decimal places.
            var decimalIndex = elm.value.indexOf('.');
            if (decimalIndex != -1) { elm.value = elm.value.substr(0, decimalIndex + 3); }
        }
    }
    catch (err) {
        alert("ValidateNumber " + err);
    }
}

Solution 20 - Javascript

function isNumberKey(evt)
{
    var charCode = (evt.which) ? evt.which : evt.keyCode;

    if(charCode==8 || charCode==13|| charCode==99|| charCode==118 || charCode==46)
    {    
        return true;  
    }
    
    if (charCode > 31 && (charCode < 48 || charCode > 57))
    {   
        return false; 
    }
    return true;
}

It will allow only numeric and will let you put "." for decimal.

Solution 21 - Javascript

<script type="text/javascript">

    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

        return true;
    }
             
</script>

@Html.EditorFor(model => model.Orderids, new { id = "Orderids", Onkeypress=isNumberKey(event)})
     
    

This works fine.

Solution 22 - Javascript

Starting from @rebisco answer :

function count_appearance(mainStr, searchFor) {
    return (mainStr.split(searchFor).length - 1);
}
function isNumberKey(evt)
{
    $return = true;
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31
            && (charCode < 48 || charCode > 57))
        $return = false;
    $val = $(evt.originalTarget).val();
    if (charCode == 46) {
        if (count_appearance($val, '.') > 0) {
            $return = false;
        }
        if ($val.length == 0) {
            $return = false;
        }
    }
    return $return;
}

Allows only this format : 123123123[.121213]

Demo here demo

Solution 23 - Javascript

Hope it will work for you.

<input type="text" onkeypress="return chkNumeric(event)" />

<script>
    function chkNumeric(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            if (charCode == 46) { return true; }
            else { return false; }
        }
        return true;
    }
</script>

Solution 24 - Javascript

Following code worked for me

The input box with "onkeypress" event as follows

<input type="text" onkeypress="return isNumberKey(this,event);" />

The function "isNumberKey" is as follows

function isNumberKey(txt, evt) {
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode == 46) {
    //Check if the text already contains the . character
    if (txt.value.indexOf('.') === -1) {
        return true;
    } else {
        return false;
    }
  } else {
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
  }
  return true;
}

Solution 25 - Javascript

I observed that for all the answers provided here, the things are not working if we select some portion of the text in textbox and try to overwrite that part. So I modified the function which is as below:

    <HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
         var charCode = (evt.which) ? evt.which : event.keyCode;
   
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
{
        return false;
}
 if (charCode == 46 && evt.srcElement.value.split('.').length>1 )
    {

        return false;

    } 

 if(evt.srcElement.selectionStart<evt.srcElement.selectionEnd)
	{
          return true;
	}

  if(evt.srcElement.value.split('.').length>1 && evt.srcElement.value.split('.')[1].length==2)
  {
    
     return false;
  }


    return true;
       }


       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>

Solution 26 - Javascript

For Decimal numbers and also allowing Negatives numbers with 2 places for decimals after the point... I modified the function to:

<input type="text" id="txtSample" onkeypress="return isNumberKey(event,this)"/>



function isNumberKey(evt, element){
        
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8 || charCode == 45))
            return false;
        else {
            var len = $(element).val().length;

            // Validation Point
            var index = $(element).val().indexOf('.');
            if ((index > 0 && charCode == 46) || len == 0 && charCode == 46) {
                return false;
            }
            if (index > 0) {
                var CharAfterdot = (len + 1) - index;
                if (CharAfterdot > 3) {
                    return false;
                }
            }

            // Validating Negative sign
            index = $(element).val().indexOf('-');
            if ((index > 0 && charCode == 45) || (len > 0 && charCode == 45)) {
                return false;
            }
        }
        return true;
    }

Solution 27 - Javascript

<input type="text" class="number_only" />    
<script>
$(document).ready(function() {
    $('.number_only').keypress(function (event) {
        return isNumber(event, this)
    });        
});
           
function isNumber(evt, element) {
    var charCode = (evt.which) ? evt.which : event.keyCode
                        
    if ((charCode != 45 || $(element).val().indexOf('-') != -1) && (charCode != 46 || $(element).val().indexOf('.') != -1) && ((charCode < 48 && charCode != 8) || charCode > 57)){
        return false;
    }
    else {
        return true;
    }
} 
</script>

http://www.encodedna.com/2013/05/enter-only-numbers-using-jquery.htm

Solution 28 - Javascript

Best and working solution with Pure-Javascript sample Live demo : https://jsfiddle.net/manoj2010/ygkpa89o/

<script>
function removeCommas(nStr) {
    if (nStr == null || nStr == "")
        return ""; 
    return nStr.toString().replace(/,/g, "");
}

function NumbersOnly(myfield, e, dec,neg)
{        
    if (isNaN(removeCommas(myfield.value)) && myfield.value != "-") {
        return false;
    }
    var allowNegativeNumber = neg || false;
    var key;
    var keychar;

    if (window.event)
        key = window.event.keyCode;
    else if (e)
        key = e.which;
    else
        return true;
    keychar = String.fromCharCode(key);
    var srcEl = e.srcElement ? e.srcElement : e.target;    
    // control keys
    if ((key == null) || (key == 0) || (key == 8) ||
                (key == 9) || (key == 13) || (key == 27))
        return true;

    // numbers
    else if ((("0123456789").indexOf(keychar) > -1))
        return true;

    // decimal point jump
    else if (dec && (keychar == ".")) {
        //myfield.form.elements[dec].focus();
        return srcEl.value.indexOf(".") == -1;        
    }

    //allow negative numbers
    else if (allowNegativeNumber && (keychar == "-")) {    
        return (srcEl.value.length == 0 || srcEl.value == "0.00")
    }
    else
        return false;
}
</script>
<input name="txtDiscountSum" type="text" onKeyPress="return NumbersOnly(this, event,true)" /> 

Solution 29 - Javascript

Working on the issue myself, and that's what I've got so far. This more or less works, but it's impossible to add minus afterwards due to the new value check. Also doesn't allow comma as a thousand separator, only decimal.

It's not perfect, but might give some ideas.

app.directive('isNumber', function () {
    		return function (scope, elem, attrs) {
    			elem.bind('keypress', function (evt) {
    				var keyCode = (evt.which) ? evt.which : event.keyCode;
    				var testValue = (elem[0].value + String.fromCharCode(keyCode) + "0").replace(/ /g, ""); //check ignores spaces
    				var regex = /^\-?\d+((\.|\,)\d+)?$/;        				
    				var allowedChars = [8,9,13,27,32,37,39,44,45, 46] //control keys and separators				
    
                   //allows numbers, separators and controll keys and rejects others
    				if ((keyCode > 47 && keyCode < 58) || allowedChars.indexOf(keyCode) >= 0) {				
    					//test the string with regex, decline if doesn't fit
    					if (elem[0].value != "" && !regex.test(testValue)) {
    						event.preventDefault();
    						return false;
    					}
    					return true;
    				}
    				event.preventDefault();
    				return false;
    			});
    		};
    	});

Allows:

11 11 .245 (in controller formatted on blur to 1111.245)

11,44

-123.123

-1 014

0123 (formatted on blur to 123)

doesn't allow:

!@#$/*

abc

11.11.1

11,11.1

.42

Solution 30 - Javascript

<input type="text" onkeypress="return isNumberKey(event,this)">

<script>
   function isNumberKey(evt, obj) {
 
            var charCode = (evt.which) ? evt.which : event.keyCode
            var value = obj.value;
            var dotcontains = value.indexOf(".") != -1;
            if (dotcontains)
                if (charCode == 46) return false;
            if (charCode == 46) return true;
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
 

</script>

Solution 31 - Javascript

I know that this question is very old but still we often get such requirements. There are many examples however many seems to be too verbose or complex for a simple implimentation.

See this https://jsfiddle.net/vibs2006/rn0fvxuk/ and improve it (if you can). It works on IE, Firefox, Chrome and Edge Browser.

Here is the working code.

        function IsNumeric(e) {
        var IsValidationSuccessful = false;
        console.log(e.target.value);
        document.getElementById("info").innerHTML = "You just typed ''" + e.key + "''";
        //console.log("e.Key Value = "+e.key);
        switch (e.key)
         {         
             case "1":
             case "2":
             case "3":
             case "4":
             case "5":
             case "6":
             case "7":
             case "8":
             case "9":
             case "0":
             case "Backspace":             
                 IsValidationSuccessful = true;
                 break;
                 
						 case "Decimal":  //Numpad Decimal in Edge Browser
             case ".":        //Numpad Decimal in Chrome and Firefox                      
             case "Del": 			// Internet Explorer 11 and less Numpad Decimal 
                 if (e.target.value.indexOf(".") >= 1) //Checking if already Decimal exists
                 {
                     IsValidationSuccessful = false;
                 }
                 else
                 {
                     IsValidationSuccessful = true;
                 }
                 break;

             default:
                 IsValidationSuccessful = false;
         }
         //debugger;
         if(IsValidationSuccessful == false){
         
         document.getElementById("error").style = "display:Block";
         }else{
         document.getElementById("error").style = "display:none";
         }
         
         return IsValidationSuccessful;
        }

Numeric Value: <input type="number" id="text1" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" /><br />
    <span id="error" style="color: Red; display: none">* Input digits (0 - 9) and Decimals Only</span><br />
    <div id="info"></div>

Solution 32 - Javascript

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

You can restrict values to be entered by user by specifying ASCII value range.
Example : 48 to 57 for numeric values (0 to 9)

Solution 33 - Javascript

document.getElementById('value').addEventListener('keydown', function(e) {
    var key   = e.keyCode ? e.keyCode : e.which;

/*lenght of value to use with index to know how many numbers after.*/

    var len = $('#value').val().length;
    var index = $('#value').val().indexOf('.');
    if (!( [8, 9, 13, 27, 46, 110, 190].indexOf(key) !== -1 ||
                    (key == 65 && ( e.ctrlKey || e.metaKey  ) ) ||
                    (key >= 35 && key <= 40) ||
                    (key >= 48 && key <= 57 && !(e.shiftKey || e.altKey)) ||
                    (key >= 96 && key <= 105)
            )){
        e.preventDefault();
    }

/*if theres a . count how many and if reachs 2 digits after . it blocks*/ 

    if (index > 0) {
        var CharAfterdot = (len + 1) - index;
        if (CharAfterdot > 3) {

/*permits the backsapce to remove :D could be improved*/

            if (!(key == 8))
            {
                e.preventDefault();
            }

/*blocks if you try to add a new . */

        }else if ( key == 110) {
            e.preventDefault();
        }

/*if you try to add a . and theres no digit yet it adds a 0.*/

    } else if( key == 110&& len==0){
        e.preventDefault();
        $('#value').val('0.');
    }
});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAyyappan AnbalaganView Question on Stackoverflow
Solution 1 - JavascriptrebiscoView Answer on Stackoverflow
Solution 2 - JavascriptHassan MokdadView Answer on Stackoverflow
Solution 3 - JavascripttauView Answer on Stackoverflow
Solution 4 - JavascriptKurenai KunaiView Answer on Stackoverflow
Solution 5 - JavascriptHubert GrzeskowiakView Answer on Stackoverflow
Solution 6 - Javascriptlak-bView Answer on Stackoverflow
Solution 7 - JavascriptJitender KumarView Answer on Stackoverflow
Solution 8 - JavascriptFathi AminView Answer on Stackoverflow
Solution 9 - JavascriptMonkeyZeusView Answer on Stackoverflow
Solution 10 - JavascriptAnish KarunakaranView Answer on Stackoverflow
Solution 11 - JavascriptRahulView Answer on Stackoverflow
Solution 12 - JavascriptSathishView Answer on Stackoverflow
Solution 13 - JavascriptkennebecView Answer on Stackoverflow
Solution 14 - JavascriptJonas ReycianView Answer on Stackoverflow
Solution 15 - JavascriptPallavi AgarwalView Answer on Stackoverflow
Solution 16 - JavascriptSantosh KurdekarView Answer on Stackoverflow
Solution 17 - Javascriptuser985818View Answer on Stackoverflow
Solution 18 - JavascriptmpalenciaView Answer on Stackoverflow
Solution 19 - JavascriptclamchodaView Answer on Stackoverflow
Solution 20 - JavascriptKal-ElView Answer on Stackoverflow
Solution 21 - JavascriptbannyView Answer on Stackoverflow
Solution 22 - JavascriptBabesh FlorinView Answer on Stackoverflow
Solution 23 - JavascriptAnkur KumarView Answer on Stackoverflow
Solution 24 - JavascriptBharat JainView Answer on Stackoverflow
Solution 25 - JavascriptAbhishek GahloutView Answer on Stackoverflow
Solution 26 - JavascriptChris RoseteView Answer on Stackoverflow
Solution 27 - JavascriptrahuldmView Answer on Stackoverflow
Solution 28 - JavascriptManoj PrajapatView Answer on Stackoverflow
Solution 29 - JavascriptJane DoeView Answer on Stackoverflow
Solution 30 - JavascriptKarthikView Answer on Stackoverflow
Solution 31 - Javascriptvibs2006View Answer on Stackoverflow
Solution 32 - JavascriptShashank PujariView Answer on Stackoverflow
Solution 33 - JavascriptbugaView Answer on Stackoverflow