miércoles, 1 de octubre de 2014

Restringir el valor de un campo en un formulario con jQuery Mask Plugin

Para restringir los valores al rellenar un formulario HTML se puede usar el plugin jQuery Mask Plugin

Haciendo uso de las nuevas funcionalidades de HTML5 y cambiando el valor del atributo "type" a "number"
<input type="number" name="hours" id="hours"> realiza una validación al enviar el formulario, pero antes de eso, te ha permitido introducir una serie de letras en el input.

Con jQuery Mask Plugin, solo permite introducir valores posibles definidos en la máscara que se le ha asignado al input.

Os dejo un ejemplo siguiendo la función 'On-the-fly mask change' de la documentación para restringir el valor de un campo al número de horas (0-24). Es necesario incluir jQuery y jQuery Mask

Ejemplo en JSFiddle aquí

<script type="text/javascript"  
src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript"  
src="js/jquery.mask.min.js"></script>

<input id="hours" type="text" value="" name="hours" >

<script  type="text/javascript>
var options_hours = {
    'translation': {
        3: {
            pattern: /[0-2*]/,
            optional: true
        },
        4: {
            pattern: /[0-4*]/
        }
    },
  
    onKeyPress: function (cep) {
        var masks = ['30', '24'];
        if (cep.length > 1) {
            var first_number = cep.substring(0, 1);
        } else {
            var
first_number = "";
        }
        mask = (
first_number == '2') ? masks[1] : masks[0];
               
        $('#hours').mask(mask, this);
    }
};

$('#hours').mask('30', options_hours);


</script>