<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
position: relative;
}
body {
width: 100%;
height: 100%;
font-size: 100%;
}
form {
width: 49%;
height: auto;
margin: 0 auto;
overflow: hidden;
}
input.spin {
width: 15%;
margin: 0 7%;
text-shadow: 0 0 0;
font: 2.4em Verdana;
background-position: right;
background-repeat: no-repeat;
background-image: url(./EmularSPINbutton/imgdefecto.gif); /*
http://imageshack.com/a/img856/9611/58u7.gif*/
background-size: .66em 1.2em;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(228, 221, 221);
outline: 0;
}
input.spin:hover {
background-image: url(./EmularSPINbutton/spin.gif); /*
http://imageshack.com/a/img853/3977/igp.gif*/
}
</style>
<script type="text/javascript">
var inputNumber = {
Evento : function(elemento, nomevento, fnc) {
elemento.addEventListener(nomevento, fnc, false);
},
cssComputado : function(obj, styleProp) {
if (obj == null) { return 0; }
var valor = window.getComputedStyle(obj, null)[styleProp];
return valor;
},
posCursor : function(evt) {
var ev = evt || window.event;
posX = ev.offsetX || ev.layerX || 0;
posY = ev.offsetY || ev.layerY || 0;
return {x:posX, y:posY};
},
WObj : 0,
WImg : 0,
HImg : 0,
initinputNumber : function() {
var sboton = document.querySelectorAll('.spin');
inputNumber.WObj = parseInt(inputNumber.cssComputado(sboton[0], 'width'), 10);
var bgSize = inputNumber.cssComputado(sboton[0], 'backgroundSize').split(' ');
inputNumber.WImg = parseInt(bgSize[0], 10);
inputNumber.HImg = parseInt(bgSize[1], 10);
Array.prototype.forEach.call(sboton, function(spin) {
inputNumber.initinputNumberEventos(spin);
});
},
initinputNumberEventos : function(spin) {
inputNumber.Evento(spin, 'mousemove', function(event) {
var pos = inputNumber.posCursor(event);
if (pos.x >= (inputNumber.WObj - inputNumber.WImg) + 4) {
this.style.cursor = 'default';
} else {
this.style.cursor = '';
}
});
inputNumber.Evento(spin, 'click', function(event) {
var pos = inputNumber.posCursor(event);
if (pos.x >= (inputNumber.WObj - inputNumber.WImg) + 4) {
var _this = this;
if (pos.y <= parseInt((inputNumber.HImg / 2), 10)) {
inputNumber.spinButton(true, _this, _this.getAttribute('data-min'), _this.getAttribute('data-max'), _this.getAttribute('data-step'));
} else {
inputNumber.spinButton(false, _this, _this.getAttribute('data-min'), _this.getAttribute('data-max'), _this.getAttribute('data-step'));
}
}
});
inputNumber.Evento(spin, 'keydown', function(event) {
var pos = inputNumber.posCursor(event);
if (pos.x < (inputNumber.WObj - inputNumber.WImg) + 4) {
var _this = this;
inputNumber.flechas(event, _this, _this.getAttribute('data-min'), _this.getAttribute('data-max'), _this.getAttribute('data-step'));
}
});
},
spinButton : function(bol, input, min, max, step) {
var inputValue = parseInt(input.value, 10) || 0;
var cantidad = (bol) ? inputValue + parseInt(step, 10) : inputValue - parseInt(step, 10);
if (cantidad < min) { cantidad = max; input.value = max; }
if (cantidad > max) { cantidad = min; input.value = min; }
input.value = cantidad;
},
// FLECHAS TECLADO
flechas : function(evt, input, min, max, step) {
var keyCode = (evt) ? evt.keyCode : event.charCode;
if (keyCode == 40) {
inputNumber.spinButton(false, input, min, max, step);
} else if (keyCode == 38) {
inputNumber.spinButton(true, input, min, max, step);
} else {
return false;
}
}
// FLECHAS TECLADO
}
inputNumber.Evento(document, 'DOMContentLoaded', inputNumber.initinputNumber);
</script>
</head>
<body>
<form>
<input type="text" class="spin" data-min="0" data-max="100" data-step="5" value="0" />
<input type="text" class="spin" data-min="0" data-max="50" data-step="10" value="0" />
<input type="text" class="spin" data-min="20" data-max="40" data-step="1" value="0" />
</form>
</body>
</html>