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

html input dropdown
html input types
html <input type=number
input type=number decimal
input html
html input attributes
input type css
input type textarea

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

To see what I mean: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

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

HTML input type Attribute, Which html5 input type allows a user to select a year and week? Attributes. The <input> element is so powerful because of its attributes; the type attribute, described with examples above, being the most important. Since every <input> element, regardless of type, is based on the HTMLInputElement interface, they technically share the exact same set of attributes.

We can make it So simple like below

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

<input>: The Input (Form Input) element, Allows you to enter a simple color value (which is in hexadecimal color notation) Software that processes XML must be able to do all the parsing without any DTD, so XML requires closing tags for all elements, though you can (and, for compatibility, mostly should) use special syntax like <input /> as shorthand for <input></input>. But XHTML still allows no content between the tags.

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.          

HTML Input Attributes, Gives you the ability to validate telephone numbers format against a pattern The value attribute specifies the value of an <input> element. For "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit) Note: The value attribute cannot be used with <input type="file">. The numbers in the table specify the first browser version that fully supports the

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

A Guide to the New HTML5 Form Input Types, What does an html5 type attribute for an input element do? <input> without a <form> appears valid, yes (at least for html 4.01, look near the end of 17.2.1): The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events.

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

<input type="number" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))" />

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

To allow number keys only:

isNaN(Number(event.key))

but accept "Backspace" (keyCode: 8) and "Delete" (keyCode: 46) ...

Solved: Java Script C10 Question 1 (1 Point) What Does An , display to the user. It makes working with CSS easier. Definition and Usage. The name attribute specifies the name of an <input> element. The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted. Note: Only form elements with a name attribute will have their values passed when submitting a form.

The HTML5 input types, Because HTML form control appearance may be quite different from a Note: You can find examples of the basic text input types at basic input  An HTML form with three input fields; two text fields and one submit button: Definition and Usage. The <input> tag specifies an input field where the user can enter data. <input> elements are used within a <form> element to declare input controls that allow users to input data.

HTML5 Input Types: Where Are They Now?, HTML5 introduced thirteen new types of form input, adding and HTML5 has been the current version of HTML now for more than four years. Definition and Usage. The type attribute specifies the type of <input> element to display. The default type is text. Tip: The type attribute is not a required attribute, but we think you should always include it.

HTML5 forms input types, value is that attribute you're used to from previous versions of HTML. Each of the attributes are optional, with defaults being set if they aren't used. The input maxlength attribute specifies the maximum number of characters allowed in an input field. Note: When a maxlength is set, the input field will not accept more than the specified number of characters. However, this attribute does not provide any feedback. So, if you want to alert the user, you must write JavaScript code.

Comments
  • It also allows you to enter +, -, and . multiple times in some browsers.
  • Ah, thanks. I was looking in the wrong spec
  • 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...
  • @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
  • @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).
  • @Anthony No, e stands for Exponent.
  • Better to use return event.keyCode !== 69 as it avoids an unnecessary ternary operator. Also wouldn't recommend inlining.
  • This does not prevent copy-pasting e or E in the field though
  • How confident are you that this will prevent inserting an 'E' character with the copy and paste functionality?
  • Just checked, you are correct, it doesn't work for copy and pasted input.
  • You are correct @StephenKelzer. I added code to handle that.
  • this will restrict user to enter that character??
  • 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
  • you can create the directive that is best practice . as well you can also do directly in .ts file of your component!