Why does the html input with type number allow the letter 'e' to be entered in the field?
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:
- Optionally, the first character may be a "
-
" character.- One or more characters in the range "
0—9
".- Optionally, the following parts, in exactly the following order:
- a "
.
" character- one or more characters in the range "
0—9
"- Optionally, the following parts, in exactly the following order:
- a "
e
" character or "E
" character- optionally, a "
-
" character or "+
" character- One or more characters in the range "
0—9
".
How to block +,-,e in input type Number?
Try preventing the default behaviour if you don't like the incoming key value:
document.querySelector(".your_class").addEventListener("keypress", function (evt) { if (evt.which != 8 && evt.which != 0 && evt.which < 48 || evt.which > 57) { evt.preventDefault(); }});
// 0 for null values// 8 for backspace // 48-57 for 0-9 numbers
<input type="number" class="your_class">
Why does the html input with type number allow the letter 'e' to be entered in the field?
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:
- Optionally, the first character may be a "
-
" character.- One or more characters in the range "
0—9
".- Optionally, the following parts, in exactly the following order:
- a "
.
" character- one or more characters in the range "
0—9
"- Optionally, the following parts, in exactly the following order:
- a "
e
" character or "E
" character- optionally, a "
-
" character or "+
" character- One or more characters in the range "
0—9
".
How do I restrict + - e , . from HTML number input?
Edit: Boris K has got an even better answer.
Original answer:
This would be a way to accomplish that:
var ageInput = document.getElementById("age")
ageInput.addEventListener("keydown", function(e) {
// prevent: "e", "=", ",", "-", "."
if ([69, 187, 188, 189, 190].includes(e.keyCode)) {
e.preventDefault();
}
})
<input type="number" id="age">
HTML text input allow only numeric input
Note: This is an updated answer. Comments below refer to an old version which messed around with keycodes.
JavaScript
Try it yourself on JSFiddle.
You can filter the input values of a text <input>
with the following setInputFilter
function (supports Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations, non-typeable keys, the caret position, different keyboard layouts, validity error message, and all browsers since IE 9):
// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter, errMsg) {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
textbox.addEventListener(event, function(e) {
if (inputFilter(this.value)) {
// Accepted value
if (["keydown","mousedown","focusout"].indexOf(e.type) >= 0){
this.classList.remove("input-error");
this.setCustomValidity("");
}
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
// Rejected value - restore the previous one
this.classList.add("input-error");
this.setCustomValidity(errMsg);
this.reportValidity();
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
// Rejected value - nothing to restore
this.value = "";
}
});
});
}
You can now use the setInputFilter
function to install an input filter:
setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
}, "Only digits and '.' are allowed");
Apply your preferred style to input-error class. Here's a suggestion:
.input-error{
outline: 1px solid red;
}
See the JSFiddle demo for more input filter examples. Also note that you still must do server side validation!
TypeScript
Here is a TypeScript version of this.
function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean, errMsg: string): void {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
this.value = this.oldValue;
if (this.oldSelectionStart !== null &&
this.oldSelectionEnd !== null) {
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
}
} else {
this.value = "";
}
});
});
}
jQuery
There is also a jQuery version of this. See this answer.
HTML 5
HTML 5 has a native solution with <input type="number">
(see the specification), but note that browser support varies:
- Most browsers will only validate the input when submitting the form, and not when typing.
- Most mobile browsers don't support the
step
,min
andmax
attributes. - Chrome (version 71.0.3578.98) still allows the user to enter the characters
e
andE
into the field. Also see this question. - Firefox (version 64.0) and Edge (EdgeHTML version 17.17134) still allow the user to enter any text into the field.
Try it yourself on w3schools.com.
Related Topics
What Is the Correct Value For the Disabled Attribute
Using Sections in Editor/Display Templates
Center a Div Horizontally and Vertically
How to Target a Specific Column or Row in CSS Grid Layout
Open Link in New Tab or Window
Draw on Html5 Canvas Using a Mouse
Using HTML and Local Images Within Uiwebview
Make Absolute Positioned Div Expand Parent Div Height
Display a Div Width 100% With Margins
Make a Grid Item Span to the Last Row/Column in Implicit Grid
How to Specify Line Breaks in a Multi-Line Flexbox Layout
Positions Fixed Doesn't Work When Using -Webkit-Transform
How to Customize ≪Input Type="File"≫
Css Content Generation Before or After 'Input' Elements
Why Does This Inline-Block Element Have Content That Is Not Vertically Aligned