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>
