Krokování počtu tlačítky plus/minus

Výsledek

HTML

Autoformát
Standardní režim
Mobilní zobrazení

CSS

Autoformát
CSS reset
Až na konci

var Stepper = function() {
    var input;
    
    /* Round */
    function round(cislo) {
    	return (Math.round((cislo) * 10000) / 10000);	
    }

/* Number validation */
    function val(value) {
        return value * 1;
    }

/* Plus/minus value */
    function change(el, step)  {
        var value = round(val(el.value) + step);
        if (value >= el.getAttribute("min") && 
            value <= el.getAttribute("max")) {
            el.value = value;   
        }
    }    
    
    var createButtons = function(el) {
        var plus = document.createElement("button");
        plus.innerHTML = "+";
        var minus = document.createElement("button");
        minus.innerHTML = "&minus;";
        
        plus.onclick = function() {
          return (function(element) {
              change(element, + element.getAttribute("step"));
          })(el);
        };
        minus.onclick = function() {
          return (function(element) {
              change(element, - element.getAttribute("step"));
          })(el);
        };        
        
        el.parentNode.appendChild(minus);
        el.parentNode.appendChild(plus);
    };
    
    var init = function() {
        input = document.querySelectorAll("input[type=number]");
        for (var i = input.length; i--; ) {
            //input[i].type = "text";
            //input[i].setAttribute("pattern", "\d*");
            createButtons(input[i]);
            input[i].onclick = function() {
                this.select();
            };
        }
    };
    
    return {
        init : init
    };
}();

Stepper.init();

JS

Autoformát
jQuery
Umístění JS