Giter VIP home page Giter VIP logo

inputnumberpolyfill's Introduction

THIS REPO IS UNMAINTAINED / A NEW MAINTAINER IS NEEDED

Polyfill for Input type="number"

This Polyfill adds buttons to step up and down the value of an input type number element in Internet Explorer 10+ and Edge.

The Polyfill requires angular version >1.4 but might also work with older versions of angular.

You need to include the module comsolitInputNumberPolyfill and declare the min, max and step attributes on an input type number element:

<body ng-app="myapp">

  <input type="number" min="0" max="42" step="1" />

  <script>
    angular.module('myapp', ['comsolitInputNumberPolyfill']);
  </script>
</body>

See also the index.html file in this repository for more examples.

LICENSE

This code is released under the MIT license, see the LICENSE file.

TODO

The polyfill has no upper boundary test. So if any future version of a Microsoft Browser should ever support number controls than the needsPolyfill function needs to be adapted.

inputnumberpolyfill's People

Contributors

clecherbauer avatar

Watchers

avatar avatar avatar avatar avatar avatar

Forkers

thkoch2001 tecjam raulrrv

inputnumberpolyfill's Issues

inputNumberPolyfill assumes type attribute is there (and can crash)

inputNumberPolyfill should not assume anything about inputs and only apply itself when it can, but never error out.

return elem.attr("type").toLowerCase() === "number" && (...)

Should become:

return elem.attr("type") && elem.attr("type").toLowerCase() === "number" &&

If an optional attribute is omitted, the directive is not applied 

function hasRequiredAttributes(elem)
  {
    return elem.attr("type").toLowerCase() === "number" &&
      !isNaN(parseFloat(elem.attr("max"))) &&
      !isNaN(parseFloat(elem.attr("min"))) &&
      !isNaN(parseFloat(elem.attr("step")));
  }

!isNaN(parseFloat(elem.attr("max"))) results in false when the attribute is missing.

Serious issue when using multiple inputs

I'm generating a table of inputs, but they all share the same value when clicking the plus/minus buttons. They initially show the correct value, but change to the wrong value (all inputs the same value) when increasing / decreasing.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.