Neste artigo você vai aprender a como fazer um input text aceitar somente números, de forma simples e fácil!
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!
Sensacional, obrigada pela dica 🙂
de nada! =)
muito bom, obg
valeu Carlos!
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; } }); });muitoooo obrigado!!!