not working in IE10

Question

Although I'm pretty sure this was working yesterday or the day before, <input type="number" min="0" max="50" step="10" value="0" />, for example, no longer works in IE10. I've tested my browser with http://ie.microsoft.com/testdrive/HTML5/Forms/Default.html and it's just not working anymore. Anyone else having this issue? Or, did it never work?

It is also does not work in IE 11 http://caniuse.com/#feat=input-number — NoWar, Sep 15 '14 at 19:17
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17313919/ — juFo, Jul 23 '19 at 09:34
Newcomers! Please don't answer this question with JavaScript that does not allow non-numeric input. We already have several (thousand) questions regarding that, including [HTML text input allow only numeric input](https://stackoverflow.com/q/469357/215552), [How to allow only numeric (0-9) in HTML inputbox using jQuery?](https://stackoverflow.com/q/995183/215552), and [How to make HTML input tag only accept numerical values?](https://stackoverflow.com/q/13952686/215552), among many others. — Heretic Monkey, Jul 23 '19 at 22:46

Sampson · Answer 1 · 2013-04-18T20:55:36.950

Internet Explorer 10 supports the number input. This is evident from a cursory examination of their documentation, as well as an attempt to use it within the browser itself. For example, attempting to place a letter in a number input will result in the value being cleared when the control loses focus.

You can also feature-detect support for number by programmatically doing the aforementioned test:

// Create the element
var element = document.createElement( "input" );

// Give it the number property and invalid contents
element.type = "number";
element.value = "qwerty";

// Value should be empty
alert( element.value ? "Not Supported" : "Supported" );

Run this test: http://jsfiddle.net/VAZwT/

It may very well be that you're equating progressively-enhanced UI (the spinners) with support for the control itself. I've seen this confuse a few people already. Some browsers augment supplement the number input with additional controls, but this is not (to my knowledge) a requirement for support.

A few simple tests for min, max, and step on jsfiddle: http://jsfiddle.net/sDVK4/show/

The number field e. g. accepts "2werwer" in IE 10/11 – MatterOfFact Feb 26 '19 at 14:51 — MatterOfFact, Feb 26 '19 at 14:51

Cyril F · Answer 2 · 2018-10-18T10:27:22.423

17

Please prefer the answer below from Sampson as it's more appropriate

IE doesn't have support for input type="number" but you can use a polyfill to make it work.

Here is the solution : http://html5please.com/#number

edited Oct 18 '18 at 10:27

answered Dec 19 '12 at 15:41

Cyril F

1,842
2
19
35

Thanks, I guess the polyfill stuff broke (I didn't write it, just debugging), because it was working. Cheers. – Richard Anthony Hein Dec 19 '12 at 15:58
6

IE 10 *does* support the number input type, it just not renders it pretty well. You are not seeking for a polyfill but a full fledged spinner control. – scravy Oct 01 '13 at 21:56
3

@scravy That's an understatement. It clears non-number values without even telling the user what happened. – OdraEncoded Dec 18 '15 at 20:13
4

There's currently no polyfill that works properly with Angular. – Benny Bottema Jul 15 '16 at 09:59

score 7 · Answer 3 · answered Dec 19 '12 at 15:34

7

IE10 does not have Number support. Source: Can I use ... yet?

Just verified on our Windows 8 test machine, there is no number spinner on their test drive site in IE10.

answered Dec 19 '12 at 15:34

JaredMcAteer

21,688
5
49
65

IE 10 partially supports number input. On putting any non-numeric value it simply clears the input field (supported) but never shows spinner (unsupported) – Hamza Dhamiya Jul 28 '15 at 01:14
In Google Chrome we can not put anything that is not number into the field. In IE and MS Edge putting alpha characters in the field resets the field to 0 on the lost focus and highlights the field in red. This is not a desired behavior, it should be fixed. – Naomi Apr 15 '16 at 21:37

score 6 · Answer 4 · answered Jul 21 '15 at 17:02

6

Microsoft has validation bugs/errors still with input type=number, this is in IE11 as well.

https://connect.microsoft.com/IE/feedback/details/850187/html5-constraint-validation-is-broken-in-ie11-for-input-type-number

Just as I was starting to like Internet Explorer again... Hopefully they can fix this in IE12, fingers crossed

answered Jul 21 '15 at 17:02

Daniel

293
4
10

They've marked it as resolved in latest Edge release. – Adam Knights Feb 10 '16 at 10:25
I can not even copy the version info from MS Edge and it took me some time to find the version (It's 25.10586). In any case, the input type="number" does not prevent me from typing any letters. And if letters are typed and I leave the field, it shows 0 instead of the value it had before. I'd rather had it disallow me to type letters. – Naomi Apr 15 '16 at 21:44
The link now redirects to: https://learn.microsoft.com/en-us/collaborate/connect-redirect . – wafflecat Nov 07 '18 at 19:05

score 1 · Answer 5 · answered Apr 03 '19 at 11:39

1

Here's the solution I developed, it works pretty well I think, hope it helps someone

function handleKeyPress(e) {
    let newValue = e.target.value + e.key;
    if (
    // It is not a number nor a control key?
    isNaN(newValue) && 
    e.which != 8 && // backspace
    e.which != 17 && // ctrl
    newValue[0] != '-' || // minus
    // It is not a negative value?
    newValue[0] == '-' &&
    isNaN(newValue.slice(1)))
        e.preventDefault(); // Then don't write it!
}

Insert a number:
<input onKeyPress="handleKeyPress(event)"/>

answered Apr 03 '19 at 11:39

Silvio Biasiol

856
8
14

Please don't answer this question with JavaScript that does not allow non-numeric input. We already have several (thousand) questions regarding that, including [HTML text input allow only numeric input](https://stackoverflow.com/q/469357/215552), [How to allow only numeric (0-9) in HTML inputbox using jQuery?](https://stackoverflow.com/q/995183/215552), and [How to make HTML input tag only accept numerical values?](https://stackoverflow.com/q/13952686/215552), among many others. – Heretic Monkey Jul 23 '19 at 22:47
Similar function as above but not allowing negative and allowing number paste: ``` function FilterInput(e) { if (isNaN(e.key) && e.key !== 'Backspace' && !(e.key === 'v' && e.ctrlKey === true) && e.key !== 'Tab' ) e.preventDefault(); }; ``` – marcofriso Feb 11 '22 at 15:21

score 0 · Accepted Answer · answered Nov 20 '19 at 14:38

0

IE doesn't have support for input type="number" but you can use jQueryUI Spinner widget. It is very simple to use and it has many API's that friendly for developers.

Demo of jQuery-UI Spinner: https://jqueryui.com/spinner/

API of jQuery-UI Spinner https://api.jqueryui.com/spinner/#event-change

answered Nov 20 '19 at 14:38

uyghurbeg

176
3
8

Similar function as above but not allowing negative and allowing number paste: ``` function FilterInput(e) { if (isNaN(e.key) && e.key !== 'Backspace' && !(e.key === 'v' && e.ctrlKey === true) && e.key !== 'Tab' ) e.preventDefault(); }; ``` – marcofriso Feb 11 '22 at 15:21

not working in IE10

6 Answers6

Linked

Related