Apenas números em formulários com Javascript

CursoCriando uma aplicação com área administrativa utilizando o Laravel

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