Controle Numero Input

by Marcos vini

HTML

<div class='qtdade' style="
    float: left;
    cursor: none;
    display: table;
    border-collapse: separate;
    width: 100px;
    "><p>Quantidade</p>
	<span style=" padding: 15px 12px 12px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: relative;
    outline: 0;
    white-space: nowrap;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
    cursor: pointer;" data-dir="dwn">-</span>
<input type="text" class='quantidade' size="8" value="1" min="1" max="10" style="
    outline: none;
    border: 1px solid #35353536;
    color: #353535;
    text-align: center;
    padding: 10px;
    font-size: 20px;
    width: 22%;
    " value="0" id="quantidade36482">
	<span style="cursor: pointer;
    padding: 15px 12px 12px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: relative;
    outline: 0;
    white-space: nowrap;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;" data-dir="up">+</span></div>

JavaScript

window.quantidadeproduto = function() {
var el= document.querySelector('.quantidade');
var min = el.getAttribute('min') || false;
var max = el.getAttribute('max') || false;
menos = el.previousElementSibling;
mais = el.nextElementSibling;
menos.addEventListener('click', diminuir);
mais.addEventListener('click', aumentar);

function diminuir() {
var value = el.value;
value--;
if(!min || value >= min) {
el.value = value;
}
}

function aumentar() {
var value = el.value;
value++;
if(!max || value <= max) {
el.value = value++;
}
}
}
quantidadeproduto();