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>

Jugando con medidas y javaScript

Me está tocando realizar alguna que otra labor con javaScript y como yo pertenezco a la vieja escuela en este lenguaje, intento siempre sacarlo todo a través de las propiedades del propio lenguaje.

Esto, si bien tiene la ventaja de que aprendes javaScript puro y duro, tiene la desventaja de que hay que saber ciertos trucos si queremos obtener los mismos resultados independientemente del navegador que se esté usando. Y esto generalmente va referido a Internet Explorer que es el que más problemas causa y ha causado históricamente.

Por poner un ejemplo, para obtener la posición de la barra de scroll del navegador, en Firefox o Chrome nos valdrá con la propiedad window.pageXOffset; pero no en Internet Explorer 9 (y anteriores supongo) en el que hace falta coger el document.body.scrollLeft. De esta manera tenemos que empezar a hacer cosas como:

var hscroll = (document.all ? document.body.scrollLeft : window.pageXOffset);
var vscroll = (document.all ? document.body.scrollTop : window.pageYOffset);

Con esto hay que tener cuidado pues uno se puede ir a casa tranquilamente pensando que su trabajo funciona para encontrarse al día siguiente con que el cliente le dice "no funciona en Internet Explorer" y tu piense... ¿qué era Internet Explorer? ¿No lo habían prohibido ya? y te toque ponerte a buscar la solución para el navegador de los hacks.

Lo mismo pasa con otras propiedades como el ancho/alto del navegador o el ancho/alto del viewport de la página que estamos viendo: hay que dar varias vueltas para obtener el valor que de verdad queremos. Cansado de ello, he decidido pasarme a la nueva escuela e introducir jQuery para obtener todos estos valores. A través de sus funciones ya implementadas no es necesario preocuparnos del navegador, pues ellos lo hacen por nosotros.
Así por ejemplo, para obtener el scroll de la página nos vale con:

var hscroll = $(window).scrollTop();
var vscroll = $(window).scrollLeft();

O lo mismo para obtener el ancho y alto del navegador:

 var winW = $(window).width();
 var winH = $(window).height();

O para obtener el offset de un elemento con respecto a la ventana:

var imgOffset = $("#elementID").offset();

Conclusión: está muy bien saber por qué funcionan las cosas y jugar con las diferentes propiedades y en los diferentes navegadores, pero cuando hay que hacer algo serio que tiene que funcionar, es preferible usar alguna de las librerías fiables que existen en internet.