Accept only numbers with decimal in a textbox using JavaScript

Last updated: 24th July 2022

Client-side validations are crucial when submitting data on a web page. For instance, consider an input box that should only accept numbers with decimal values, disallowing any other characters. In this article, I'll demonstrate how to ensure that a textbox only permits numbers or numbers with a decimal point using JavaScript.

By the way, you can ignore JavaScript or any framework by simply assigning the input type as "number". For example,

<input type='number' value='' id='txt1' />

However, it is always advisable to validate data on the client side before submission and again on the server side before processing or saving it.

The Markup and the Script

<body>
    <div>
        Enter only numbers with a Decimal value: 
        <input type='text' id='tbNumbers' value=''
            onkeypress='javascript: return isNumber(event)'
            autocomplete='off' />
    </div>
</body>

<script>
    // Write the validation script.

    let isNumber = (evt) => {
        let iKeyCode = (evt.which) ? evt.which : evt.keyCode
        if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
            return false;

        return true;
    }

    // prevent pasting any text.
    tbNumbers.addEventListener('paste', function (e) {
        e.preventDefault();
    });
</script>
</html>

Try it

Overview

Just outside the </body>, I have the JavaScript block with a function named as isNumber(), which takes a Keyboard event as parameter. The parameter will be checked against Ascii KeyCodes.

Ascci stands for "American Standard Code for Information Interchange".

Check the KeyCode

We'll check each key event individually against each character, which the user enters in the textbox.

The ternary code var iKeyCode = (evt.which) ? evt.which : evt.keyCode works like the if…else condition.

However, you can also write the code in this way:

let iKeyCode;
If (evt.which)
    iKeyCode = evt.which;
Else
    iKeyCode = evt.keyCode;	// Keywords are case sensitive.

The value in iKeyCode will be checked against a range of Ascii codes to make sure it’s a number (numeric value). The function will return "true" or "false" based on the entered value. No value will be displayed on the "textbox" control if the condition returns false.

When a user enters a value in the input box, the onkeypress event calls the isNumber() function (that I have written inside the <script> tag), along with the key press event. The function checks every key entered in the input box and returns true only if the entered values in a number, else it will return false. If it is false, the user won’t see any value in the box.

You should also try this

If you are a .net programmer, you can do a small assignment on your own. Use the Asp.Net textbox control instead of <input> box, and see if the function works as I have explained above.

<asp:TextBox ID="tbPh" runat="server"></asp:TextBox>

← PreviousNext →