Apenas números em formulários com Javascript

Gunnar CorreaGunnar Correa12/03/2016 às 05:13:44 - 16.773 acessos

Entenda como criar suas funções para validação de números em formulários.


É a realidade de qualquer desenvolver ter que implementar diversas regras de validações em seus formulários, as informações geradas através deles possivelmente serão persistidas em uma base de dados para ser usada futuramente. O fato é que não podemos nos dar o luxo de deixar uma validação de lado, devido a requisição da informação o dado deverá retornar em um formato válido.

Neste artigo vamos entender como funciona a captura de teclas e também como validar um campo input text para aceitar apenas números e o back-space. Para fazer isto não vamos precisar de nenhuma biblioteca, apenas poucas linhas de códigos usando if e else, além de uma única variável.

Vamos usar a estrutura HTML como mostrado do código abaixo, note apenas um campo input text.

Código 01:

<!docytype html>
<html lang="pt-br">
	<head>
		<title>Apenas Números</title>
		<meta charset="UTF-8" />
		<script>
		
		</script>
	</head>
	<body>
		<input type="text" id="txtNumeros" placeholder="Apenas números" />
	</body>
</html>

Para obtermos a tecla pressionada, usamos o event. which ou event.keycode, o event.which está depreciado e só funciona em navegadores antigos já o event.keycode funciona em todos os navegadores atualizados, vaja na imagem abaixo as especificações do site oficial da Mozilla.

Javascript suporte event.keycode

Informação retira do site / removed from the site information: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Para verificar qual tecla foi pressionada, precisamos recorrer a tabela ASCII na qual contém os valores Hexadecimal de 0 a 9 e Back-space, então consulte o link abaixo para saber mais a respeito.

Tabela ASCII, manipulação no Javascript.

https://pt.wikipedia.org/wiki/ASCII

Vamos criar uma função quere recebe o evento na qual será disparado ao pressionar uma tecla no formulário, vamos usar o evento OnKeyDown. Observe o algoritmo abaixo.

Código 02:

<!docytype html>
<html lang="pt-br">
	<head>
		<title>Apenas Números</title>
		<meta charset="UTF-8" />
		<script>

            function SomenteNumero(e) {
                var tecla; //Armazena a tecka pressionada.
				
                if (e.which) {
                    tecla = e.which;
                } else {
                    tecla = e.keyCode;
                }

                if ((tecla >= 48 && tecla <= 57) || (e.which == 08)) {
                    return true;
                } else {
                    return false;
                }
             }
		</script>
	</head>
	<body>
		<input type="text" id="txtNumeros" placeholder="Apenas números" onkeydown="ObterTecla(event)" />
	</body>
</html>

Veja o quanto é simples, você precisa criar esta função uma única vez e usar em qualquer projeto.

Até a próxima.


javascript aulas tutorial validação números event. which event.keycode if else input form keydown

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários