In this article I will explain how to perform Numeric (number) validation using TextBox OnKeyPress event in JavaScript.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-size: 9pt;
            font-family: Arial;
        }
    </style>
</head>
<body>
    Numeric Value: <input type="text" id="text1" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" />
    <span id="error" style="color: Red; display: none">* Input digits (0 - 9)</span>
    <script type="text/javascript">
        var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        function IsNumeric(e) {
            var keyCode = e.which ? e.which : e.keyCode
            var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
            document.getElementById("error").style.display = ret ? "none" : "inline";
            return ret;
        }
    </script>
</body>
</html>
 
 
Explanation:
In the above HTML Markup I have a TextBox for which I have specified three event handlers, onkeypress, ondrop and onpaste.
On the onkeypress event handler, I am making call to a JavaScript function IsNumeric. This function first determines the ASCII code of the keyboard key and then verifies that its ASCII code is within the range 48 to 57. Also it makes sure that the key pressed is not an special key like Backspace or Delete, if yes then that too is excluded
For more details on various Keyboard key ASCII code please visit Keyboard Keys and Key Code Values
On the ondrop event handler, I have simply written return false so that the dropping functionality on the TextBox is disabled.
On the onpaste event handler, I have simply written return false so that the pasting functionality on the TextBox is disabled.
Restrict user to enter only numeric value ( numbers ) in TextBox using JavaScript
 
Demo
View Demo
 
Downloads