Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

<input type="number"> not working in IE10

Tags:

html

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?

like image 217
Richard Anthony Freeman-Hein Avatar asked Dec 19 '12 15:12

Richard Anthony Freeman-Hein


2 Answers

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/

like image 67
Sampson Avatar answered Nov 07 '22 13:11

Sampson


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

like image 17
Cyril F Avatar answered Nov 07 '22 15:11

Cyril F