Tag Archives: expressão regular

Write less, do more.

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

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

%d blogueiros gostam disto: