CODEWITHSUNDEEP
htmlinputnumbers
Gnarlywhale
Gnarlywhale

Reputation: 4240

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

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">

Upvotes: 335

Views: 328153

Answers (16)

bilelz
bilelz

Reputation: 297

valueAsNumber can do the job (copy/paste proof)

    <input type="number" oninput="this.value = this.valueAsNumber">

Upvotes: 9

Sur
Sur

Reputation: 303

The E stands for the exponent, and it is used to shorten long numbers. Since the input is a math input and exponents are in math to shorten great numbers, so that's why there is an E.

It is displayed like this: 4e.

Links: 1 and 2

Upvotes: 8

Simon Legg
Simon Legg

Reputation: 256

Angular; with IDE keyCode deprecated warning

The functionally is the same as rinku's answer but with IDE warning prevention

numericOnly(event): boolean {
    // noinspection JSDeprecatedSymbols
    const charCode = (event.which) ? event.which : event.key || event.keyCode;  // keyCode is deprecated but needed for some browsers
    return !(charCode === 101 || charCode === 69 || charCode === 45 || charCode === 43);
}

Upvotes: 1

ashish
ashish

Reputation: 63

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

Upvotes: -5

bareMetal
bareMetal

Reputation: 551

Simplest solution is parseInt() .

<input type="number" onkeyup="this.value = parseInt(this.value); this.paste(this.onkeyup);"/>

ParseInt() returns blank(NaN) for E, e, +, - and anything which is not a number.

Use onkeyup and keydown according to your convenience with paste event. For me onkeyup works best. This works with copy-paste as well

Upvotes: 0

alex
alex

Reputation: 81

The above solutions work in regular html only. For reactJS I would suggest you to do this instead

  <input type="number" onKeyDown={(e) =>["e", "E", "+", "-"].includes(e.key) && e.preventDefault()} >

Upvotes: 6

A. Morel
A. Morel

Reputation: 10384

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'

Upvotes: 60

Berkay Nayman
Berkay Nayman

Reputation: 241

if you hit a key and its computer language equivalent is 69 it won't type it

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

Upvotes: 2

Prasad Bhalerao
Prasad Bhalerao

Reputation: 119

Simple and standard solution : In Angular/ Js/ Ts you can use regular expression to restrict any input key.

HTML: <input type="text" name="input1" (keypress)="numericOnly($event)" />

TS:

    numericPattern = /^[0-9]*$/;
    numericOnly(event){
       return this.numericPattern.test(event.key);
    }

Upvotes: 0

Jelle
Jelle

Reputation: 808

A simple solution to exclude everything but integer numbers

<input  
    type="number"
    min="1" 
    step="1"
    onkeypress="return event.keyCode === 8 || event.charCode >= 48 && event.charCode <= 57">

This solution does not prevent copy and pasting (including the letter 'e').

Upvotes: 11

Rinku Choudhary
Rinku Choudhary

Reputation: 2281

Using angular, You can do this to restrict to enter e,+,-,E

 <input type="number"  (keypress)="numericOnly($event)"/>


  numericOnly(event): boolean { // restrict e,+,-,E characters in  input type number
    debugger
    const charCode = (event.which) ? event.which : event.keyCode;
    if (charCode == 101 || charCode == 69 || charCode == 45 || charCode == 43) {
      return false;
    }
    return true;

  }

Upvotes: 8

Austris Cirulnieks
Austris Cirulnieks

Reputation: 1189

To hide both letter e and minus sign - just go for:

onkeydown="return event.keyCode !== 69 && event.keyCode !== 189"

Upvotes: 10

j08691
j08691

Reputation: 208012

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".

Upvotes: 284

yasarui
yasarui

Reputation: 6573

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" />

Upvotes: 105

Anon Cypher
Anon Cypher

Reputation: 369

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.　　　　　　　　　　

Upvotes: 36

user3248578
user3248578

Reputation: 913

<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();
    }
};

Upvotes: 15

Related Questions