modernizr example

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<link rel="stylesheet" href="html5-reset.css">
<form action="/echo/html/" method="POST">
    <input type="text" name="name" placeholder="name" autofocus />
    <input type="number" name="age" min="13" max="100" placeholder="age" />
    <input type="month" name="birthdate" placeholder="birthdate" />
    <input type="tel" name="phone" placeholder="phone" />
    <input type="email" name="email" placeholder="email" required />
    <input type="url" name="url" placeholder="url" />
    <input type="password" name="password" placeholder="password" disabled />
    <input type="color" name="color" placeholder="favorite color" />
    <input type="range" name="range" min="13" max="100" placeholder="range" />
    <datalist id="pages">
        <option value="home">Home</option>
        <option value="logout">Logout</option>
    </datalist>
    <input type="search" name="search" placeholder="search" list="pages" />
    <datalist id="browsers">
        <option value="Google Chrome"/>
        <option value="Internet Explorer"/>
        <option value="Firefox"/>
        <option value="Opera"/>
        <option value="Safari"/>
        <option value="Others"/>
    </datalist>
    <input type="text" name="browser" list="browsers" placeholder="choose browser" />
    <button type="submit">submit</button>
</form>

CSS

form {
    margin: 1em;
}
input, button {
    border: 1px solid silver;
    background: white;
    padding: 5px;
    margin-bottom: 1em;
    display: block;
}

JavaScript

// Generated by CoffeeScript 1.4.0

/*
HTML5 Number polyfill | Jonathan Stipe | https://github.com/jonstipe/number-polyfill
*/


(function() {

  (function($) {
    var i;
    i = document.createElement("input");
    i.setAttribute("type", "number");
    if (i.type === "text") {
      $.fn.inputNumber = function() {
        var clipValues, decrement, domMouseScrollHandler, extractNumDecimalDigits, getParams, increment, matchStep, mouseWheelHandler;
        getParams = function(elem) {
          var $elem, max, min, step, val;
          $elem = $(elem);
          step = $elem.attr('step');
          min = $elem.attr('min');
          max = $elem.attr('max');
          val = parseFloat($elem.val());
          step = /^-?\d+(?:\.\d+)?$/.test(step) ? parseFloat(step) : null;
          min = /^-?\d+(?:\.\d+)?$/.test(min) ? parseFloat(min) : null;
          max = /^-?\d+(?:\.\d+)?$/.test(max) ? parseFloat(max) : null;
          if (isNaN(val)) {
            val = min || 0;
          }
          return {
            min: min,
            max: max,
            step: step,
            val: val
          };
        };
        clipValues = function(value, min, max) {
          if ((max != null) && value > max) {
            return max;
          } else if ((min != null) && value < min) {
            return min;
          } else {
            return value;
          }
        };
        extractNumDecimalDigits = function(input) {
          var num, raisedNum;
          if (input != null) {
            num = 0;
            raisedNum = input;
            while (raisedNum !== Math.round(raisedNum)) {
              num += 1;
              raisedNum = input * Math.pow(10, num);
            }
            return num;
          } else {
            return 0;
          }
        };
        matchStep = function(value, min, max, step) {
          var mod, raiseTo, raisedMod, raisedStep, raisedStepDown, raisedStepUp, raisedValue, stepDecimalDigits, stepDown, stepUp;
         ...