Muitas vezes, ao criar um input como idade, queremos que o usuário só possa digitar números, uma solução simples utilizando o próprio HTML é deixar o type do input como number, porém ele ainda permite alguns caracteres especiais como o "-" hífen, por esse motivo criei uma solução simples com JavaScript utilizando as expressões regulares.
Primeiro criamos o input e atribuimos uma função javascript na propriedade onkeyup passando como parâmetro o próprio elemento:
<input type="text" onkeyup='onlynumber(this)'/>
Porque usar a onkeyup ao invés da onkeydown ou onkeypress? Pois nesse caso queremos que o caractere seja trocado imediatamente após o usuário soltar a tecla.
Agora criaremos a função na tag <script>:
<script>
function onlynumber(doc){
}
</script>A função foi nomeada como onlynumber e recebe um único parâmetro nomeado de doc.
Agora vamos criar uma variável com expressões regulares que aceite somente caracteres não numéricos, para isso usaremos o Metacaractere '\D'.
Lista de Metacaracteres:
fonte da imagem: https://www.youtube.com/watch?v=9r48XuOB4DA
function onlynumber(doc){
var regex = /\D/g; //Obs: utilizamos as barras '/ /', para declarar a expressão regular;
}
Agora precisamos que a cada tecla pressionado, que input receba um valor não numérico o programa troque esse valor para vazio:
function onlynumber(doc){
var regex = /\D/g;
doc.value=doc.value.replace(regex,''); //Pegamos o valor do elemento(this) e trocamos ele por //vazio caso ele seja compatível com nossa expressão regular;
}
EmoticonEmoticon