Hola, en esta ocasión os traigo un método jQuery llamado spinbox que os servirá para emular el elemento input number de HTML5, el método spinbox puede ser muy útil para implementarlo en navegadores en los que el elemento input number no es compatible, de hecho, es peculiar que un navegador como Google Chrome en el S.O Android no acepta este elemento.
El método spinbox acepta las opciones fundamentales del input number como son: min, max, value y step. Cada una de ellas pueden ser configuradas al gusto.
Por defecto las opciones vienen con los siguientes valores:
var defaults = {
min: 0,
max: 100,
value: 0,
step: 1
};
Los icono de incremento y decremento son proporcionados por Font Awesome, estilizar el spinbox ya es cuestión de lo que necesitéis, CSS3 está en vuestras manos.
A continuación podéis ver unos ejemplos con un spinbox básico, un spinbox con números negativos y un spinbox con número en punto flotante y al final el código con el plugin y los ejemplos.
Spinbox by jQuery Manual
Por defecto
Números negativos: {min: -50, max: 50, value: -50}
Números en punto flotante: {min: 0, max: 10, value: 0, step: 0.1}
Código fuente del plugin con los ejemplos ...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>
<!-- Icons -->
<link rel="stylesheet" type="text/css" href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" />
<script>
(function($){
/* Author: Manu Dávila | Web: http://jquery-manual.blogspot.com */
$.fn.spinbox = function(options){
var defaults = {
min: 0,
max: 100,
value: 0,
step: 1
};
if (options === undefined){options = defaults;}
if (options.min === undefined) {options.min = defaults.min;}
if (options.max === undefined) {options.max = defaults.max;}
if (options.value === undefined) {options.value = defaults.value;}
if (options.step === undefined) {options.step = defaults.step;}
options.min = parseFloat(options.min);
options.max = parseFloat(options.max);
options.value = parseFloat(options.value);
options.step = parseFloat(options.step);
var input = this.find("input");
var spin_up = this.find(".spin-up");
var spin_down = this.find(".spin-down");
input.val(options.value);
spin_up.on("click", function(){
if (Number(input.val()) !== NaN){
if (parseFloat(input.val()) > options.max || parseFloat(input.val()) < options.min)
{
input.val(options.max);
return;
}
if (parseFloat(input.val()) < options.max)
{
value = parseFloat(input.val())+options.step;
if (String(value).match(/\./) && String(options.step).match(/\./))
{
max_decimal = String(options.step).split(".")[1];
value = value.toFixed(max_decimal);
}
input.val(value);
}
}
});
spin_down.on("click", function(){
if (Number(input.val()) !== NaN){
if (parseFloat(input.val()) < options.min || parseFloat(input.val()) > options.max)
{
input.val(options.min);
return;
}
if (parseFloat(input.val()) > options.min)
{
value = parseFloat(input.val())-options.step;
if (String(value).match(/\./) && String(options.step).match(/\./))
{
max_decimal = String(options.step).split(".")[1];
value = value.toFixed(max_decimal);
}
input.val(value);
}
}
});
};
})(jQuery);
$(function(){
$("#spinbox-1").spinbox();
$("#spinbox-2").spinbox({min: -50, max: 50, value: -50});
$("#spinbox-3").spinbox({min: 0, max: 10, value: 0, step: 0.1});
});
</script>
<style>
.input-spinbox{
border: 1px solid #D2E3EB;
border-radius: 2px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 2px;
padding-left: 2px;
}
.input-spinbox:focus{
border-color: 2px solid #2C426D;
}
.spin-up{
position: relative;
left: -18px;
top: -6px;
background-color: #5371AE;
color: #fff;
border-radius: 2px 2px;
}
.spin-down{
position: relative;
left: -36px;
top: 6px;
background-color: #5371AE;
color: #fff;
border-radius: 0px 0px 2px 2px;
}
.spin-up:hover, .spin-down:hover{
cursor: pointer;
}
</style>
</head>
<body>
<h1>Spinbox by <a href="http://jquery-manual.blogspot.com">jQuery Manual</a></h1>
<h3>Por defecto</h3>
<div id="spinbox-1">
<input type="text" name="spinbox-1" class="input-spinbox" />
<span class="spin-up fa fa-angle-up fa-lg"></span>
<span class="spin-down fa fa-angle-down fa-lg"></span>
</div>
<h3>Números negativos: {min: -50, max: 50, value: -50}</h3>
<div id="spinbox-2">
<input type="text" name="spinbox-2" class="input-spinbox" />
<span class="spin-up fa fa-angle-up fa-lg"></span>
<span class="spin-down fa fa-angle-down fa-lg"></span>
</div>
<h3>Números en punto flotante: {min: 0, max: 10, value: 0, step: 0.1}</h3>
<div id="spinbox-3">
<input type="text" name="spinbox-3" class="input-spinbox" />
<span class="spin-up fa fa-angle-up fa-lg"></span>
<span class="spin-down fa fa-angle-down fa-lg"></span>
</div>
</body>
</html>
