Why does the html input with type "number" allow the letter 'e' to be entered in the field?

Question

I have the following html5 input element:

<input type="number">

Why does this input allow for the character 'e' to be entered in the input field? No other alphabet character is able to be entered (as expected)

Using chrome v. 44.0.2403.107

Example below to see what I mean.

<input type="number">

Solution 1

Because that's exactly how the spec says it should work. The number input can accept floating-point numbers, including negative symbols and the e or E character (where the exponent is the number after the e or E):

A floating-point number consists of the following parts, in exactly the following order:

1. Optionally, the first character may be a "-" character.
2. One or more characters in the range "0—9".
3. Optionally, the following parts, in exactly the following order:
   1. a "." character
   2. one or more characters in the range "0—9"
4. Optionally, the following parts, in exactly the following order:
   1. a "e" character or "E" character
   2. optionally, a "-" character or "+" character
   3. One or more characters in the range "0—9".

Solution 2

We can make it So simple like below

<input type="number"  onkeydown="javascript: return event.keyCode == 69 ? false : true" />

Updated Answer

we can make it even more simple as @88 MPG suggests

<input type="number" onkeydown="return event.keyCode !== 69" />

Solution 3

The best way to force the use of a number composed of digits only:

<input type="number" onkeydown="javascript: return ['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.code) ? true : !isNaN(Number(event.key)) && event.code!=='Space'" />

this avoids 'e', '-', '+', '.' ... all characters that are not numbers !

To allow number keys only, convert to number with Number function. If this is not a number, the result is NaN :

isNaN(Number(event.key))

but accept Backspace, Delete, Arrow left, Arrow right :

['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.code)

This is for Firefox which allows spaces :

event.code!=='Space'

Solution 4

HTML input number type allows "e/E" because "e" stands for exponential which is a numeric symbol.

Example 200000 can also be written as 2e5. I hope this helps thank you for the question.　　　　　　　　　　

Solution 5

<input type="number" onkeydown="return FilterInput(event)" onpaste="handlePaste(event)"  >

function FilterInput(event) {
    var keyCode = ('which' in event) ? event.which : event.keyCode;

    isNotWanted = (keyCode == 69 || keyCode == 101);
    return !isNotWanted;
};
function handlePaste (e) {
    var clipboardData, pastedData;

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text').toUpperCase();

    if(pastedData.indexOf('E')>-1) {
        //alert('found an E');
        e.stopPropagation();
        e.preventDefault();
    }
};

View more solutions

Comments

[nu everest]

It also allows you to enter +, -, and . multiple times in some browsers.

[Gnarlywhale]

Ah, thanks. I was looking in the wrong spec

[Simon]

I'm still baffled by this, first of all I'm not a mathematician, so what does "e" stand for in the context of a number? Second I don't get why input.value is an empty string as soon as you write an "e" in it, even though there are numbers and the character is allowed...

[ZeroBased_IX]

@Simon It's the exponent, you can see it in action if you multiply a large number by a large number and the calculator doesn't have enough supported digits to display it. Someone who is better at mathematics might explain it better.

[stephenkelzer]

How confident are you that this will prevent inserting an 'E' character with the copy and paste functionality?

[Gnarlywhale]

Just checked, you are correct, it doesn't work for copy and pasted input.

[Gnarlywhale]

@Simon, using the e is useful for condensing large numbers that would be otherwise tedious to type out. As a trivial example, 2e2 = 2*10^2 = 200

[user3248578]

You are correct @StephenKelzer. I added code to handle that.

[Simon]

Shouldn't the input.value then return 200 if you type in 2e2?

[Ped7g]

@Simon depends whether the value is string or numeric value. If it's numeric, 2e2 is 200, those are equal values and it doesn't matter which form of presentation you use to display it, it's still 0b11001000 either way. If the input is string, then well, convert it to number first, so you don't have to bother which format was used to input the value.

[Simon]

@Ped7g Well that's exactly the problem! If I want to read out the value to find out it's 200 either way I can't, because input.value will return undefined as soon as I write the "e".

[Ped7g]

@Simon "as soon as I write e", well, yes "4e" is not a number, while for example "4e+0" is a valid number (4). If you have some "live" client-side javascript code working with partial user input, you have to give user time to finish his input editing to provide full value, and not interfere half way into editing. If you have "undefined" from "4e+0" input, fix your "to number" parser. The example from question works well, reports "4e+1" as error, and "4e+0" is returned correctly as "4e+0" (ie. number between 1 and 5).

[oldboy]

I just discovered this. I'm assuming the 'e' character is possibly used to indicate 'extension' for phone numbers since type=tel isn't commonly adopted

[Adam Fratino]

Better to use return event.keyCode !== 69 as it avoids an unnecessary ternary operator. Also wouldn't recommend inlining.

[Scott Marcus]

@Anthony No, e stands for Exponent.

[molamk]

This does not prevent copy-pasting e or E in the field though

[Amy]

this will restrict user to enter that character??

[Amy]

thanks for the help i was looking for the same solution in angular but now i have idea how to do it, i'll create directive and complete the task thanks for your post

[Rinku Choudhary]

you can create the directive that is best practice . as well you can also do directly in .ts file of your component!

[user1063287]

are there any other instances similar to e or E that non-mathematicians might not be aware of that could be added to this conditional check?

[yasarui]

@user1063287, this is the only exception in the case

[GTS Joe]

👍 Final code: onkeydown="return event.keyCode !== 69 && event.keyCode !== 187 && event.keyCode !== 189" That prevents e, + and -.

[ehab]

Notice that this will be accepting space: the key of space is ' ', Number(' ') is equal to zero

[simpsons3]

@GTSJoe, you need to add 107 and 109 too, its +, - on numpad :D

[Koba]

a smart solution

[Geff]

adding && !event.key == ' ' solves the problem of spaces.

[Faiyaj]

it's a nice one

[nima]

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: stackoverflow.com/help/how-to-answer . Good luck 🙂

[Sfili_81]

Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See How to Answer.

[richinrix]

Thanks. I was working in react and this is the only solution that worked for me. The remaining solutions don't work in react.