Máscara de números em Javascript – Aceitando apenas valores númericos

Como adicionar uma máscara de números em Javascript, aonde iremos limitar que em um campo (input text) seja digitado apenas valores numéricos.

Máscara de números em javascript

Existem diversas formas de você fazer isso, algumas mais simples e outras mais complicadas, porém todas irão funcionar.

A vantagem de se utilizar javascript é a sua simplicidade e compatibilidade.

Chega de perder tempo, vamos lá!

Utilizando apenas Javascript

<input type="text" name="campo_de_teste" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />

No evento onkeypress temos:

return event.charCode >= 48 && event.charCode <= 57

Com event.charCode conseguimos saber qual tecla foi pressionada por meio do seu “charCode”, utilizando de uma validação simples, limitamos para que seja aceito apenas os números “códigos” das teclas numéricas, que são sequências e estão entre os códigos 47 e 59, simplificando ainda mais a validação.

HTML 5

Com HTML 5, basta você declarar o tipo do input como “number”

<input type="number">

Ele ainda tem alguns problemas de compatibilidade e o seu comportamento nos navegadores ainda não é padronizado.

Com jQuery

Você também pode utilizar jQuery, que não deixa de ser Javascript..

  $("#seu_campo_numerico").keydown(function (e) {       
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||        
            (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||          
            (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||           
            (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||            
            (e.keyCode >= 35 && e.keyCode <= 39)) {          
                 return;
        }   
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });