CODEWITHSUNDEEP
html
Richard Anthony Hein
Richard Anthony Hein

Reputation: 10650

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

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?

Upvotes: 34

Views: 85443

Answers (6)

uyghurbeg
uyghurbeg

Reputation: 320

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

Upvotes: 0

Silvio Biasiol
Silvio Biasiol

Reputation: 953

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

Upvotes: 1

Cyril F
Cyril F

Reputation: 1892

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

Upvotes: 18

Daniel
Daniel

Reputation: 303

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

Upvotes: 7

Sampson
Sampson

Reputation: 268492

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/

Upvotes: 26

JaredMcAteer
JaredMcAteer

Reputation: 22545

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.

Upvotes: 7

Related Questions