Permitir apenas digitação de numeros no campo com JQuery

Write less, do more.

Bom, como muitas vezes precisamos limitar a entrada de dados em campos onde o usuário digita o conteúdo, vou disponibilizar um função que usa o JQuery para limitar o usuário a digitar apenas números no campo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
    <head>
	    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
		$(document).ready(function(){
 
			function onlyNumber(fields){
			$(fields).unbind('keyup').bind('keyup',function(e){ //vou buscar o evento keyup - quando o usuário solta a tecla
 
				var thisVal = $(this).val(); // atribuo o valor do campo a variável local
				var tempVal = "";
 
				for(var i = 0; i<thisVal.length; i++){
					if(RegExp(/^[0-9]$/).test(thisVal.charAt(i))){ // aqui estou usando uma expressão regular para limitar a entrada de apenas numeros ou seja digitos entre 0 e 9
						tempVal += thisVal.charAt(i); //caso atenda a condição de ser um digito numérico, atribuo a uma variável temporária
 
						if(e.keyCode == 8){
							tempVal = thisVal.substr(0,i); //o keyCode == 8 é para eu poder usar o backspace para apagar algum numero indesejado.
						}						
					}
				}			
				$(this).val(tempVal); // ao terminar, atribuo o valor validado ao valor do campo passado para testar
			});
		}
 
		onlyNumber($('input[id="sonumero"]')); // a chamada a função fica assim, é só passar o campo que deseja ser validdo
 
		});
 
        </script>
    </head>
    <body>
 
    Digite apenas números<input type="text" id="sonumero" name="sonumero" maxlength="11"/>
 
    <br><br>Simples assim!<br>
 
    </body>
</html>


Exemplo aqui!

Eu recomendo o livro JQuery – A Biblioteca do Programador Javascript, para quem está começando, o livro tem uma didática muito boa e exemplos práticos do começo ao fim do livro.

seal

4 Responses to Permitir apenas digitação de numeros no campo com JQuery

  1. Cesar disse:

    Amigo, caso queira que apenas o primeiro número aceite apenas número de 1 a 9 e os seguintes 0-9. como podemos fazer isso em seu exemplo?

  2. Bom se estivéssemos testando uma cadeia de caracteres poderíamos usar outro padrão regex mas como aqui eu testo cada caractere digitado, basta testar se o indice correspondente ao primeiro caracter é número diferente de zero.

  3. andre disse:

    a função está apagando 2 casas por vez

  4. Alexandre disse:

    Obrigado pelo script

Deixe uma resposta

%d blogueiros gostam disto: