Neste artigo vou ensinar como você pode criar máscaras de texto, números e dinheiro para ser inserido no input do seu html. As máscaras são muito importantes quando você precisa de uma informação valiosa do usuário, como seu telefone, e gostaríamos de algo bonito e fácil de ler, como (17) 9 9173-3578. Contudo, sabemos que um simples placeholder não será o suficiente para nos livrar das loucuras que o usuário sempre faz (você sabe do que estou falando). Para isso, podemos utilizar as máscaras. As máscaras impedem que o usuário insira espaços e caracteres indesejados onde não deve.

Neste artigo irei mostrar duas formas de fazer isso, ambas de forma bem simples. Primeiramente ensinarei a criar sua própria máscara de uma forma bem simples através de um plugin oferecido pelo Jquery. Em seguida, irei disponibilizar um código secundário onde você pode simplesmente copiar (ou baixar o .js) e inserir no meio de seus javascripts e já estará funcionando sem esforço.

Criando suas próprias máscaras com Jquery Mask Input

As máscaras oferecidas pelo Jquery são bem simples de aprender a utilizar e também são bem modulares para vários tipos de campos.
Para isso, será necessário que você implemente o plugin no seu projeto:

<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>           

Uma vez referenciado os .js em seu projeto, vamos tratar dos scripts. Veja e analise os seguinte código abaixo:

$('.telefone').mask('(00) 0 0000-0000');
$('.dinheiro').mask('#.##0,00', {reverse: true});
$('.estado').mask('AA');
        

Através dele, basta chamar os inputs em html referenciando suas respectivas classes:

<input type="text" name="telefone" class="telefone form-control" placeholder="(17) 9 9173-3578" />
<label for="dinheiro">R$</label><input type="text" id="dinheiro" name="dinheiro" class="dinheiro form-control" style="display:inline-block" />
<input type="text" id="estado" name="estado" class="estado form-control" placeholder="UF" />

E com isso teremos:



R$ 

Simples, não?
No javascript, basta substituir onde seriam os caracteres digitados pelo usuário por 0 em caso de números, ou por A em caso de texto.
É simplesmente isso a regra do plugin. Você pode brincar a vontade.
Perceba também a propriedade reverse(true), que como o próprio nome diz, ele inverte o padrão da digitação neste campo.

Exemplos e demonstrações
Segue abaixo alguns exemplos que deixei fácil para você simplesmente pegar e utilizar em seu projeto:

<input type="text" name="cpf" class="cpf form-control" placeholder="Digite seu CPF" />
<input type="text" name="cnpj" class="cnpj form-control" placeholder="Digite o CNPJ" />
<input type="text" name="rg" class="rg form-control" placeholder="Digite seu RG" />
<input type="text" name="cep" class="cep form-control" placeholder="Digite o CEP" />
<input type="text" name="dataNascimento" class="dataNascimento form-control" placeholder="Digite sua data de nascimento" />
<input type="text" name="placaCarro" class="placaCarro form-control" placeholder="Digite a placa do carro" />
<input type="text" name="horasMinutos" class="horasMinutos form-control" placeholder="Digite as horas e os minutos" />
<input type="text" name="cartaoCredito" class="cartaoCredito form-control" placeholder="Digite o número do cartão de crédito" />

Seus respectivos códigos em javascript:

$('.cpf').mask('000-000.000-00');
$('.cnpj').mask('00.000.000/0000-00');
$('.rg').mask('00.000.000-0');
$('.cep').mask('00000-000');
$('.dataNascimento').mask('00/00/0000');
$('.placaCarro').mask('AAA-0000');
$('.horasMinutos').mask('00:00');
$('.cartaoCredito').mask('0000 0000 0000 0000');

Essas são algumas funções bem básicas do plugin do Jquery para máscaras, mas você pode se aprofundar muito mais e criar máscara mais personalizadas. O link da referência oficial do plugin está no final do artigo, ou você pode clicar aqui para vê-lo.

Máscaras alternativas (copia e cola)

Se você não quiser colocar a mão na massa para criar suas próprias máscaras, não há problema. O código a seguir eu utilizei por muito tempo em meus projetos simplesmente por preguiça de criar minhas máscaras rsrs.
É bem simples de usar, segue o código:

Array.prototype.forEach.call(document.body.querySelectorAll("*[data-mask]"), applyDataMask);

function applyDataMask(field) {
    var mask = field.dataset.mask.split('');
    
    // For now, this just strips everything that's not a number
    function stripMask(maskedData) {
        function isDigit(char) {
            return /\d/.test(char);
        }
        return maskedData.split('').filter(isDigit);
    }
    
    // Replace `_` characters with characters from `data`
    function applyMask(data) {
        return mask.map(function(char) {
            if (char != '_') return char;
            if (data.length == 0) return char;
            return data.shift();
        }).join('')
    }
    
    function reapplyMask(data) {
        return applyMask(stripMask(data));
    }
    
    function changed() {   
        var oldStart = field.selectionStart;
        var oldEnd = field.selectionEnd;
        
        field.value = reapplyMask(field.value);
        
        field.selectionStart = oldStart;
        field.selectionEnd = oldEnd;
    }
    
    field.addEventListener('click', changed)
    field.addEventListener('keyup', changed)
}            

Para utilizá-lo, basta chamar o parametro data-mask e logo em seguida, substituir onde seriam os caracteres digitados pelo usuário por _. Veja o exemplo:

<input type="text" name="cnpj" class="form-controll" data-mask="__.___.___/____-__" value='__.___.___/____-__'/> 

Atenção: Infelizmente este script de máscara não funciona se você, na mesma página, estiver referenciando o plugin do Jquery.
Outra desvantagem desse script é apenas utilizar caracteres numerais, não é possível inserir texto. Uma vantagem é subrescrever a máscara, ao contrário do plugin do Jquery que tem apenas o placeholder que some ao digitar algo. Se não quiser utilizar o subscrito, basta remover o value do input.

Máscara de moedas
O código acima trata apenas de números. Se você quiser utilizar uma máscara para moedas, também há como, mas através de outro script.
Basta implementar:

<script src="dist/jquery.maskMoney.min.js" type="text/javascript"></script>

Depois no javascript:

 $(function() {
    $('#currency').maskMoney();
})
	

Todas as opções de máscara aqui são viáveis. Persisto, se possível, utilize a máscara via plugin do Jquery, pois ela pode ser modelada mais fácilmente. É certo que utilizando uma das máscaras prontas, certa hora será necessário inserir novos campos modulares e caso não esteja utilizando o plugin do Jquery você não conseguirá fazer alterações no código.

Referências
Plugin Jquery
Máscara de números
Máscara de moedas