Why <input type="number"> Accepts e, +, and -

When using <input type="number">, you may notice that characters like e, +, or - are allowed. This behavior isn't a bug, its intentional. Browsers support scientific notation (for example, 1e3 1e3 equals 1000), so they permit these symbols as part of valid numeric input. However, if your goal is to restrict users to plain decimal values only, you'll need to add custom validation to block them.

Example

Below is an input field of type number. While it appears to restrict entries to numeric values (with decimal), it also accepts inputs like 1e+20 or 1.24574e.

Enter a valid number with decimals:

Is This a Bug or Intended Behavior?

This isn't a bug. Allowing e, +, and - in <input type="number"> is intentional. Browsers support scientific notation (for example, 1e3 equals 1000), so these characters are treated as valid input.

HTML5 <input type="number"> is designed to accept numbers in both standard and scientific formats. That's why typing 1e-2 is valid and interpreted as 0.01.

That said, the behavior can be confusing if your use case requires only plain decimal values.

How to restrict input to plain decimals

There's a simple solution. You can combine <input type="number"> with custom filtering with a simple JavaScript code. For example,

<input type="number" id="tbNumbers" />

<script>
    tbNumbers.addEventListener("keydown", function (e) {
        if (["e", "E", "+", "-"].includes(e.key)) {
            e.preventDefault();
        }
    });
</script>

Try it

🚀 Although somewhat outdated, you can still use the keypress event along with ASCII code checks to restrict input in a textbox to numbers and decimal values only. Check this out. It is still a reliable method.

← Previous