Arquivo da tag: keyup

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

Como bloquear a tecla Backspace com JQuery

Antes de postar o código, é preciso falar sobre o evento que usaremos.
Temos como opção trabalhar com os eventos do teclado: keypress, keyup e keydown.
Teoricamente poderíamos usar qualquer um destes eventos, isso claro se não tivéssemos as tão queridas incompatibilidades entre navegadores. Mostrarei abaixo algumas propriedades dos eventos de teclado nos navegadores: Chrome, Firefox e IE 8, para que todos vejam que ao implementar determinada funcionalidade com algum destes eventos, é necessário verificar a compatibilidade com cada navegador.

Google Crhome 21.0.1180.89 m >

keydown
keyCode is 8
charCode is 0

keyup
keyCode is 8
charCode is 0

IE 8 >

keydown
keyCode is 8
charCode is undefined

keyup
keyCode is 8
charCode is undefined

Firefox 15.0.1 >

keydown
keyCode is 8
charCode is 0

keypress
keyCode is 8
charCode is 0

keyup
keyCode is 8
charCode is 0
Podemos ver que o evento keypress só é compatível com Firefox.
Após sabermos qual evento utilizar e qual código da tecla (ver tabela ASCII)  queremos trabalhar, vamos a implementação:

 

/**Bloqueia o evento keydown para a tecla backspace em todo o documento**/
	function backspaceBlock(){
		$(document).unbind('keydown').bind('keydown',function(e){
			if(e.keyCode == 8){
				return false;
			}
		});	
 
	}

Desta forma bloquearemos a tecla backspace assim que chamarmos a função backspaceBlock(). E podemos ainda aproveitar esta estrutura para fazer a função que desbloqueia a tecla backspace, assim podemos mandar bloquear e desbloquear quando quisermos.

	/**Desbloqueia o evento keydown para a tecla Backspace **/
	function backspaceUnlock(){
		$(document).unbind('keydown').bind('keydown',function(e){
			if(e.keyCode == 8){
				return true;
			}
		});			
	}

Lembrando que esta não é a unica forma de se fazer, mas com estas informações fique mais claro o caminho.

Obrigado pela leitura.