Accept only numbers with decimal in a textbox using JavaScript

Last updated: 24th July 2022

Client side validations become very important when submitting data on a web page. Here is a practical scenario. We have an input box and it must accept only numbers with decimal values, and it should not allow other characters as input. Here, in this post I'll show you how to enter only numbers or allow only numbers with a decimal in a textbox using JavaScript.

👉 Since, JavaScript is a medium to validate user entered values, we need a function that will check for the entered values in a Numeric Only Field.

By the way, you can ignore JS 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 check data at client side before submitting and at the server side before processing or saving the data.

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

👉 How to generate random numbers in JavaScript?

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 →