jonstipe/number-polyfill

A polyfill for implementing the HTML5 <input type="number"> element in browsers that do not currently support it.

number-polyfill's Issues

Modern browsers don't allow to submit if the value does not match the min/max value

The polyfill allows to submit an invalid value for the min/max on ie9. Where current browsers render a warning in this case.

Tried it on this demo page:
http://jonstipe.github.io/number-polyfill/demo.html

"unsupported pseudo root" error in IE8

When trying to use this in IE8, javascript execution halted with "unsupported pseudo root" at https://github.com/jonstipe/number-polyfill/blob/master/number-polyfill.js#L27

Firefox, double spinner when calling inputNumber() for the second time..

when input type=number already has up-down spinner, and inputNumber() called, it should not add more spinner..

Not working on Edge

Hello,

Tested this plugin and now my input type="number" works on IE version that didn't support it before, but it still not working on Edge.

I see that the code is 2 years old, so I presume it have to be updated to include Edge support.

Regards,

Alex

Suggestions

Hi, some suggestions:

• Mirror the master branch to a gh-pages branch to get a live demo of the plugin. Link to it from the readme. Most people won't bother downloading it to try it out.
• Update the demo html to also show how it looks for browsers that do support the number input.
• Add a repo description
• Add a link to caniuse in the readme: http://caniuse.com/#feat=input-number

Delete Key Issue

There is a bug in the polyfill. The Delete (46) key is not detected properly.

add to cdnjs

hi, recently we want to add your lib on https://cdnjs.com, could you please consider adding tags for every released version so that we can use git auto-update config to add them to cdnjs, or if you maybe not going to release later version, can we regard the version on github as v1.0.0 to add it to cdnjs?
thank you very much!

cdnjs/cdnjs#7282

Initial fraction values are clipped to whole numbers

Even with step set to .5, numbers initially are rounded up or down to the nearest whole number, causing serious issues for us.

Both the step as well as the value is set using Angular.

do I include the file with a link tag? or a script tag?

I am fairly new to HTML and js and would really like to use this for my website

Inititally hidden input boxes result in an error

Hey, I've an accordion which has number input elements.

On page load I get the error "Element must be in DOM and displayed so that its height can be measured.".

Is there anyway around this to allow inputs to initially be hidden?

Support for attribute readonly

Nice work!

I'd be great if the polyfill would support the readonly attribute in the input.

Right now, you can have a readonly input that can be modified using the arrows, which is not very coherent...

Thanks,

Issues with negative min value

When going from a positive value and entering negative, the first negative number will be what's specified in min="" attribute, e.g. -100 instead of 0.

Bower Support

It would be nice to have support for Bower.

Spinner buttons below input on IE & Firefox

Certain nesting conditions cause the spinners to land below the input rather than next to it.

<span>
  <li>
    Maximum Number of Collections
    <input id="gr_509" class="gridinput null integer" type="number" value="" style="text-align: right;">
   <div class="number-spin-btn-container">
     <div class="number-spin-btn number-spin-btn-up" style="height: 11px;"></div>
     <div class="number-spin-btn number-spin-btn-down" style="height: 11px;"></div>
   </div>
  </li>
</span>

This sample is representative of one such case where I am seeing this.

Correctly handling culture

I am using the polyfill in a globalized application. The culture on the serverside changes to whatever the users preference is. The polyfill seems to follow a default culture, which is causing problems.

Example:
I enter "4.6" in a textbox and submit the form.
On the server side (ASP.NET MVC) the value is parsed and my double reads "46". That's because in the Dutch culture settings, the comma is used as a decimal seperator. So the correct value should have been "4,6".

I use the jQuery globalize plugin (https://github.com/jquery/globalize) for formatting based on culture. It would be great if the polyfill would follow that culture.

Demo Link Broken

Maybe make a gh-pages branch so that you can use github's pages feature to host?

Doesn't allow empty fields in IE/Firefox

The title here pretty much says it all. In IE or Firefox if you delete the value and leave the input field the value is changed from nil to 0.

Does not work for i.e.

Just installing this because i.e. does not support up/down arrow controls but it does not work!! What's the point if i.e. is the browser that does not support the number type and this does not work in i.e.?

Click on "up" button on empty input with min gives value min+1

So in this case polyfill skips value "min" and goes directly to "min + 1"
You can see it at the demo page if you click "up" button on empty "Number with min" input. Value goes to 6 while min=5 is set on that input.
Current native implementation in Firefox 33 sets control value to "min" in this case.
I have not checked other browsers, but isn't it more logical to do what Firefox does?

iOS min/max support

It seems the polyfill doesn't bring min/max support to iOS. Is it something that's possible?

Scrolling on a not focused element should be disabled

At the moment a user scrolling over a not focused input element can accidentally change its value.
Also this behavior doesn't match native Chrome behavior.

I'd rather disable change on scroll over a not focused elements (or at least make it configurable).

Thanks for your work!

Not working on ie version 11

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

jQuery dependency

Hi,

Just thought if you would be interested in dropping jQuery from the plugin? I believe it will really open up this plugin for people who do not use it because it depends on jQuery. I'd love to lend a hand in having a go at it.

Thanks.

Can not put comma(.) using mozilla browser

I was trying to use input with number type for decimal number input.
It works great in chrome browser, but I can't input comma (with .) when I use input number in mozilla browser. And I thought it's a number-polyfill bug.

Thank you for your attention.

up/down buttons are not generated with proper height if input element is detached/hidden

When the input type=number element that it is applied to is currently detached (e.g. when using Backbone to generate some DOM and then attach it) or when it is hidden, the wrong height is detected/used for the up/down buttons.

doesnt work in android 4.1.2 native browser

Hi,
Unfortunately demo page does not work on android native browser.

• Android 4.1.2 Chrome: Success (no change after input blur, error showed up successfully after submit)
• Android 4.1.2 native browser: Fail. (both after submit amd blur)

How to use it in angular4

As My application is in Angular4 how can I use this is polyfill in angular 4??