¿Cómo se puede restringir con jQuery un campo de formulario para que sólo admita números?

Estoy desarrollando un sitio web en el que necesito limitar los valores que el usuario puede introducir en un campo de un formulario. Lo que quiero es que sólo pueda escribir caracteres numéricos del 0 al 9. ¿Cómo puedo hacerlo con jQuery?

Estás leyendo una traducción autorizada de la pregunta How to allow only numeric (0-9) in HTML inputbox using jQuery? planteada por Prashant en StackOverflow.

Respuestas

Si utilizas un navegador moderno no es necesario hacer uso de jQuery para conseguir esto. Simplemente indica que el campo de formulario es de tipo number:

<input type="number">

Incluso, dependiendo de tu caso, puedes añadir los atributos min y max para restringir todavía más los números que se pueden introducir. Ejemplo:

<label>Puntuación</label>
<input type="number" min="0" max="100">

Si no puedes utilizar HTML5, crea un campo de texto normal y utiliza el siguiente código JavaScript para impedir que el usuario introduzca un carácter diferente a un número:

<input id="campo" name="..." type="text" />

$(document).ready(function() {
    $("#campo").keydown(function (e) {
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
            (e.keyCode == 65 &amp;&amp; e.ctrlKey === true) || 
            (e.keyCode >= 35 &amp;&amp; e.keyCode <= 39)) {
                 return;
        }
 
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) &amp;&amp; (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

Por último, esta otra alternativa, que es un poco más rudimentaria, utiliza solamente código JavaScript puro, por lo que no requiere de jQuery:

<input name="..." type="text"
onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

@librosweb

9 octubre 2014, 16:43

Te puedes ahorrar todo ese proceso sin crear códigos, sólo utilizando este plugin: jQuery numeric.

Y este plugin lo puedes usar para restringir que ingreses sólo números por ejemplo cuando solo quieres ingresar un DNI o documento de identidad:

<!-- código html -->
<input type="text" id="numero" name="numero">
 
```js
$(document).ready(function(){
   $('#numero').numeric();    // números
   $('#numero').numeric('.'); // números con separador decimal
   $('#numero').numeric(','); // números con separador decimal
});
 
Y eso es todo.

@heyller_w

3 diciembre 2014, 16:55

Quizas sea muy tarde para responder esta pregunta, pero siempre habra alguien que la utilice, para evitarnos todo ese enrollo, es mejor utilizar expresiones regulares. Aquí tienes un ejemplo que yo utilizo:

$(this).keyup(function (){
 this.value = (this.value + '').replace(/[^0-9]/g, '');
});

@versace123mx

18 octubre 2016, 4:45