Como forçar o campo de entrada para inserir números apenas usando JavaScript?

Restringir o usuário a apenas valores numéricos de entrada é extremamente importante, especialmente ao tomar dados em um formulário. Existem inúmeros exemplos em que restringir o usuário para evitar qualquer entrada errada é importante, como levar o número de telefone do usuário ou talvez perguntar ao usuário sobre sua idade.

No HTML, a tag de entrada pode ser definida apenas para obter entradas numéricas definindo seu tipo propriedade para o número ou para Tel. No entanto, fazer isso através do JavaScript será um pouco complicado.

Etapa 1: o documento HTML

Crie um arquivo HTML e, nesse arquivo, configure um campo de entrada e algum texto dizendo ao usuário para inserir dados no campo de texto com a ajuda das seguintes linhas:

Digite números aqui

Nessas linhas:

• A propriedade Onkeypress da tag de entrada foi definida para o valor de retorno do checkNumber () método
• A propriedade Onkeypress é executada em um evento específico acontecendo, e esse evento é uma imprensa de chave, então passe o evento dentro do checkNumber () método também.

A execução da página da Web HTML agora fornecerá o seguinte resultado no navegador:

Atualmente, todos os tipos de caracteres podem ser escritos dentro deste campo de texto:

Mas isso mudará na próxima seção.

Etapa 2: Configurar o código JavaScript

No arquivo JavaScript ou no tag, comece criando a função nomeada como checkNumber ():

função checkNumber (evento)
// as próximas linhas entram aqui

Dentro desta função, a primeira coisa é obter o código ASCII da imprensa de chave usando o “evento" variável:

var acode = evento.qual ? evento.Qual: evento.Código chave;

Depois disso, se o código ASCII não for numérico, retorne falso Para o campo de entrada de outra forma, retorne true:

if (acode> 31 && (acode < 48 || aCode > 57)) retornar falso;
retornar true;

O trecho de código completo será como:

função checkNumber (evento)
var acode = evento.qual ? evento.Qual: evento.Código chave;
if (acode> 31 && (acode < 48 || aCode > 57)) retornar falso;
retornar true;

Com isso, você terminou com a criação da parte JavaScript.

Etapa 3: testando o campo de entrada

Depois de terminar com as etapas 1 e 2, basta executar o documento HTML e tentar colocar valores dentro do campo de entrada e observar seu comportamento:

Agora está apenas permitindo que os números sejam escritos dentro dele e ignore outro personagem

Conclusão

Para restringir o usuário a inserir apenas caracteres numéricos dentro de uma entrada usando JavaScript. Então, nesse caso, chame uma função em todas as teclas pressionadas dentro desse campo de entrada e, dentro dessa função, compare o código ASCII da tecla pressionada com os códigos ASCII de valores numéricos. Com base nessa comparação, permita que as chaves sejam inseridas dentro do campo de entrada.