HTML

Como fazer um input text aceitar somente números

8 de julho de 2021

Como fazer um input text aceitar somente números

Neste artigo você vai aprender a como fazer um input text aceitar somente números, de forma simples e fácil!

input text aceitar somente números capa

Fala programador(a), beleza? Bora aprender mais sobre inputs, formulários e também HTML!

Para que um input texto aceite apenas números, precisamos adicionar JavaScript ao código

Justamente para filtra estes caracteres indesejados, isso vai adicionar complexidade no nosso código

O que podemos fazer então?

Vamos utilizar o input number!

Este input tem um leve problema, um scroll de mudança de números, o que geralmente não é bem vindo no layout do nosso projeto

Por isso se evita utilizar este tipo de input, e pode até ser que você esteja procurando alternativas por causa deste problema

A boa notícia é que podemos esconder este elemento com CSS, legal né?

Então vamos lá:

<input type="number" placeholder="Digite seu número">

Aqui temos o input padrão, com o scroll de mudança

Agora veja o CSS necessário para esconder este scroll:

/* Chrome e outros */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Desta forma escondemos o elemento indesejado, e então temos um input que aceita apenas números sem adição de JavaScript

Caso você ainda deseje um input do tipo texto, veja este snippet:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" />

Ele cria um input de texto, que automaticamente filtra o que foi digitado, não aceitando números

Note que utilizamos um código JavaScript com expressão regular, no atributo oninput

Conclusão

Neste artigo você viu como fazer um input text aceitar somente números

Na verdade, primeiramente mostrei um exemplo com o type number, escondendo o scroll de mudança

E depois foi também passado um snippet para remoção de caracteres não numéricos em um input text

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!
Subscribe
Notify of
guest
5 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Monique

Sensacional, obrigada pela dica 🙂

Last edited 8 meses atrás by Monique
Battisti

de nada! =)

carlos

muito bom, obg

Battisti

valeu Carlos!

David Ricardo Pereira Lima

Ele ainda aceita a letra ‘e’, trabalho com react(typescript) e alguns codigos q encontrei pra barrar isso nao da certo

adiciona isso q da certo:

$(function() {
    $("#input").keypress(function(event) {
        if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
            $(".alert").html("Enter only digits!").show().fadeOut(2000);
            return false;
        }
    });
});
Last edited 1 mês atrás by David Ricardo Pereira Lima
5
0
Would love your thoughts, please comment.x