jonstipe / number-polyfill Goto Github PK
View Code? Open in Web Editor NEWA polyfill for implementing the HTML5 <input type="number"> element in browsers that do not currently support it.
A polyfill for implementing the HTML5 <input type="number"> element in browsers that do not currently support it.
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
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
when input type=number already has up-down spinner, and inputNumber() called, it should not add more spinner..
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
Hi, some suggestions:
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.There is a bug in the polyfill. The Delete (46) key is not detected properly.
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!
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.
I am fairly new to HTML and js and would really like to use this for my website
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?
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,
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.
It would be nice to have support for Bower.
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.
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.
Maybe make a gh-pages
branch so that you can use github's pages feature to host?
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.
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.?
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?
It seems the polyfill doesn't bring min/max support to iOS. Is it something that's possible?
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!
hi, i tried the polyfill and working great but does not work in internet explorer version 11
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.
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.
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.
Hi,
Unfortunately demo page does not work on android native browser.
As My application is in Angular4 how can I use this is polyfill in angular 4??
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.