Logo SatellaSoft



Apenas números em formulários com Javascript

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


Ícone homem Gunnar Correa
Ícone data de publicação 12/03/2016
Ícone quantidade de visualização 7,024
Ícone bandeira do Brasil Português

É 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.

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.

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.




Sobre o autor


Gunnar Correa

Nome: Gunnar Correa

Site: http://www.gunnarcorrea.com


Autodidata, graduado em Desenvolvimento Web e especialista em Tecnologias na Educação em uma universidade no interior de São Paulo. Comecei meus estudos na área de programação quando ainda era criança, e atualmente estou estudando desenvolvimento de jogos.

Sou o CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Comentários



É necessário estar autenticado para comentar, clique aqui para se registrar ou aqui para acessar a sua conta!