Accept only numbers with decimal in a textbox using JavaScript

Last updated: 11th December 2025

Client-side validation plays a vital role in ensuring clean and reliable data before it ever reaches the server. Imagine a scenario where a user needs to enter numeric values with decimals, any stray letters or symbols could break calculations or cause errors. To prevent this, we can enforce rules directly in the browser. In this article, I'll walk you through how to restrict a textbox so it accepts only numbers and decimal values, using simple JavaScript techniques.

💡 Modern HTML5 already provides <input type="number">, which automatically restricts input to numbers and decimals in most browsers. For example,

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

🤔 Note: <input type="number"> accepts letters e, + and -. It can be confusing sometimes. So, is it a bug or intentional? Learn more about it.

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

👉 You may also like: How to generate random numbers in JavaScript?

Overview

Placed just after the closing </body> tag, the JavaScript block defines a function called isNumber(). This function accepts a keyboard event as its parameter and evaluates the input against ASCII key codes to determine whether the pressed key represents a valid numeric character or a decimal point.

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

Check the KeyCode

Each key event will be evaluated against the character entered in the textbox to ensure it represents a valid numeric input.

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

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 iKeyCode value is compared against a defined range of ASCII codes to verify whether the key pressed corresponds to a numeric character or a decimal point. Based on this check, the function returns either true or false. If the result is false, the character is blocked and nothing appears in the textbox.

When a user types into the input box, the onkeypress event triggers the isNumber() function defined in the <script> tag. This function evaluates each key pressed to determine whether it represents a valid numeric character or a decimal point. If the check passes, the function returns true and the character is displayed; if it fails, it returns false and the character is blocked from appearing in the textbox.

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 →