Not working on ie version 11

[alhoseany]

hi, i tried the polyfill and working great but does not work in internet explorer version 11

[minmur]

Same with IE10, but the problem is in the browser itself: IE10 and above supports input type number, but doesn't render +/- buttons.

[alhoseany]

so, what is the fix to treat those browsers as not supporting the input type number?

[minmur]

My fast workaround was to apply this pollyfill everytime and hide +/- buttons for webkit browsers like this:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

[akopachov]

Had the same issue. My fast workaround is to replace
if (i.type === "text") // (line 12)
to this:
if (i.type === "text" || $.browser.msie || ($.browser.mozilla && $.browser.version &lt; 20)) { // if IE ($.browser.mozilla && $.browser.version < 20) = IE11, because f**n IE11 try to hide who he is

[Ninir]

@jonstipe Any quick and clean solution for this please?

[jonstipe]

If this is due to IE's native implementation, messing with it runs the risk of also breaking other browsers with native implementations and future IE versions. Doing browser detection is notoriously unreliable. Not sure this can be fixed.

[lessless]

one can use Modernzr or jQuery.support

[zane-techempower]

The issue is indeed on line 12 where the script does a naive check to see if the browser is indeed IE. The issue is that this fails on some versions of IE, I am using a function that does a better job from the testing that I've done (IE 8 and 11).

On line 12 of number-polyfill.js (un-minified) change:

if (i.type === "text") {

to

if (detectIE()) {

Where detectIE() is a working IE-detecting function. Below is the one I am using which includes IE 12 ("Edge") that I found over here on stackoverflow. Feel free to remove the references to variable i as well, that tester element is not needed.

function detectIE() {
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf('MSIE ');

  // IE 10 or older => return version number
  if (msie > 0) {
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }

  var trident = ua.indexOf('Trident/');
  // IE 11 => return version number
  if (trident > 0) {
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }

  var edge = ua.indexOf('Edge/');
  // IE 12 => return version number
  if (edge > 0) {
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
  }

    return false;
}

Edit: to clarify, this plugin does work for IE 11 (and others), but the condition for applying the polyfill wasn't the best/IE has changed since this was updated.

[bbottema]

It works, but not for dynamically inserted inputs. In which case we need to reassert this polyfill everytime.

[rennan]

This script block was added in polyfill or just here?

[markzolotoy]

So, does it work in IE 11? I tried detectIE() and it didn't help.

[RouR]

numberPolyfill = function (elem) {
    var $fieldContainer, MutationObserver, attrObserver, halfHeight,
        _this = this;
    this.elem = $(elem);
    if (!(this.elem.is(":root *") && this.elem.height() > 0)) {
        throw new Error("Element must be in DOM and displayed so that its height can be measured.");
    }

    if (detectIE()) {
        console.log("IE");
    } else {
        console.log("Not IE");
        return;
    }