Persueint control número Spinner en Pure JS-incremento de paso

Vista prévia

Descripción

El paso de incremento puro de JavaScript/CSS convierte la entrada de número normal en un control Spinner con botones de incremento y decremento.

Admite los atributos nativos Min/Max y Step.

Funcionamiento

Envuelva la entrada numérica junto con los botones de incremento y decremento en un elemento.

<span class="stepper">

<button>–</button>

<input type="number" id="stepper" value="5" min="0" max="100" step="2" readonly>

<button>+</button>
</span>

Los estilos CSS necesarios.

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {

-webkit-appearance: none;

height: auto;
}

.stepper {

border: 1px solid #eee;

display: inline-block;

overflow: visible;

height: 2.1em;

background: #fff;

padding: 1px;
}

.stepper input {

width: 3em;

height: 100%;

text-align: center;

border: 0;

background: transparent;

color: #000;
}

.stepper button {

width: 1.4em;

font-weight: 300;

height: 100%;

line-height: 0.1em;

font-size: 1.4em;

padding: 0.2em !important;

background: #eee;

color: #333;

border: none;
}

El principal JavaScript para activar el control de Spinner.

var inc = document.getElementsByClassName("stepper");
for (i = 0; i < inc.length; i++) {

var incI = inc[i].querySelector("input"),


id = incI.getAttribute("id"),


min = incI.getAttribute("min"),


max = incI.getAttribute("max"),


step = incI.getAttribute("step");

document


.getElementById(id)


.previousElementSibling.setAttribute(



"onclick",



"stepperInput('" + id + "', -" + step + ", " + min + ")"


);

 document


.getElementById(id)


.nextElementSibling.setAttribute(



"onclick",



"stepperInput('" + id + "', " + step + ", " + max + ")"


);
 }

function stepperInput(id, s, m) {

var el = document.getElementById(id);

if (s > 0) {


if (parseInt(el.value) < m) {



el.value = parseInt(el.value) + s;


}

} else {


if (parseInt(el.value) > m) {



el.value = parseInt(el.value) + s;


}

}
}