34

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?

Richard Anthony Hein
  • 10,550
  • 3
  • 42
  • 62
  • 1
    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

6 Answers6

25

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/

Sampson
  • 265,109
  • 74
  • 539
  • 565
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

Cyril F
  • 1,842
  • 2
  • 19
  • 35
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.

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

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

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