WebMasks.js

// Web Masks

/**
 * Mascara de Telefone para ser usada em inputs html
 * @param {KeyboardEvent} evt - O evento será entregue aqui
 * @example <caption>Executa a mascara quando evento keyup é lançado.</caption>
 * document.querySelector('#phone').addEventListener('keyup',execMascaraTel);
 * @author Vinicius de Santana <vinicius.vts@gmail.com>
 * @license CC BY-NC
 */
function execMascaraTel (evt) {
  let v = evt.target.value;
  v=v.replace(/\D/g,""); //Remove tudo o que não é dígito
  v=v.replace(/^(\d{11})(\d*)/g,"$1"); // remove o excedente de 11 digitos
  v=v.replace(/^(\d{2})(\d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos
  v=v.replace(/(\d)(\d{4})$/,"$1-$2"); //Coloca - depois dos 4 digitos após ()
  evt.target.value = v;
}

/**
 * Mascara de CPF para ser usada em inputs html
 * @param {KeyboardEvent} evt - O evento será entregue aqui
 * @example <caption>Executa a mascara quando evento keyup é lançado.</caption>
 * document.querySelector('#cpf').addEventListener('keyup',execMascaraCPF);
 * @author Vinicius de Santana <vinicius.vts@gmail.com>
 * @license CC BY-NC
 */
function execMascaraCPF (evt) {
  let v = evt.target.value;
  v=v.replace(/\D/g,""); //Remove tudo o que não é dígito
  v=v.replace(/^(\d{11})(\d)/g,"$1"); //Remove mais de 11 digitos
  // Coloca a pontuação do CPF
  v=v.replace(/^(\d{3})(\d)/g,"$1.$2");
  v=v.replace(/^(\d{3}\.)(\d{3})(\d)/g,"$1$2.$3");
  v=v.replace(/^(\d{3}\.)(\d{3}\.)(\d{3})(\d)/g,"$1$2$3-$4");
  evt.target.value = v;
}

/**
 * Mascara de CPF para ser usada em inputs html
 * @param {KeyboardEvent} evt - O evento será entregue aqui
 * @example <caption>Executa a mascara quando evento keyup é lançado.</caption>
 * document.querySelector('#cep').addEventListener('keyup',execMascaraCEP);
 * @author Vinicius de Santana <vinicius.vts@gmail.com>
 * @license CC BY-NC
 */
function execMascaraCEP (evt) {
  let v = evt.target.value;
  v=v.replace(/\D/g,""); //Remove tudo o que não é dígito
  v=v.replace(/^(\d{8})(\d)/g,"$1"); //Remove mais de 8 digitos
  // Coloca a pontuação do CEP
  v=v.replace(/^(\d{5})(\d)/g,"$1-$2");
  evt.target.value = v;
}

/**
 * Mascara para ser usada em inputs html, remove todos os digitos
 * @param {KeyboardEvent} evt - O evento será entregue aqui
 * @example <caption>Executa a mascara quando evento keyup é lançado.</caption>
 * document.querySelector('#onlyText').addEventListener('keyup',execOnlyText);
 * @author Vinicius de Santana <vinicius.vts@gmail.com>
 * @license CC BY-NC
 */
function execOnlyText (evt) {
    let v = evt.target.value;
    v=v.replace(/\d/g,""); //Remove tudo o que é dígito
    evt.target.value = v;
}

/**
 * Mascara de CNPJ para ser usada em inputs html
 * @param {KeyboardEvent} evt - O evento será entregue aqui
 * @example <caption>Executa a mascara quando evento keyup é lançado.</caption>
 * document.querySelector('#cnpj').addEventListener('keyup',execMascaraCNPJ);
 * @author Vinicius de Santana <vinicius.vts@gmail.com>
 * @license CC BY-NC
 */
function execMascaraCNPJ (evt) {
  let v = evt.target.value;
  v=v.replace(/\D/g,""); // Remove tudo o que não é dígito
  v=v.replace(/^(\d{14})(\d)/g,"$1"); // CNPJ Brasileiro tem 14 digitos
  // Coloca a pontuação do CNPJ
  v=v.replace(/^(\d{2})(\d)/g,"$1.$2");
  v=v.replace(/^(\d{2}\.)(\d{3})(\d)/g,"$1$2.$3");
  v=v.replace(/^(\d{2}\.)(\d{3}\.)(\d{3})(\d)/g,"$1$2$3/$4");
  v=v.replace(/^(\d{2}\.)(\d{3}\.)(\d{3}\/)(\d{4})(\d)/g,"$1$2$3$4-$5");
  evt.target.value = v;
}

/**
 * Máscara dinheiro para ser usada em inputs html
 * @param {KeyboardEvent} evt - O evento será entregue aqui
 * @example <caption>Executa a mascara quando evento keyup é lançado.</caption>
 * document.querySelector('#dinheiro').addEventListener('keyup',execMascaraDinheiroBR);
 * @author Vinicius de Santana <vinicius.vts@gmail.com>
 * @license CC BY-NC
 */
function execMascaraDinheiroBR(evt){
    let v = evt.target.value;
    v=v.replace(/\D/g,"");             //Remove tudo o que não é dígito
    v=v.replace(/(\d+)(\d{2})/g,"R$ $1,$2"); //R$ (grupo1),(grupo2)
    evt.target.value = v;
}

/**
 * Máscara para exibir número digitado com m²,
 * @param {KeyboardEvent} evt - O evento será entregue aqui
 * @example <caption>Executa a mascara quando evento keyup é lançado.</caption>
 * document.querySelector('#metrosQuad').addEventListener('keyup',execMetrosQuadMask);
 * @author Vinicius de Santana <vinicius.vts@gmail.com>
 * @license CC BY-NC
 */
function execMetrosQuadMask(evt){
    let v = evt.target.value;
    v=v.replace(/\D/g,"");             //Remove tudo o que não é dígito
    v=v.replace(/(\d+)/g,"$1 m²"); //R$ (grupo1),(grupo2)
    evt.target.value = v;
}

/**
 * Máscara remove todos os caracteres que não sejam numeros
 * @param {KeyboardEvent} evt - O evento será entregue aqui
 * @example <caption>Executa a mascara quando evento keyup é lançado.</caption>
 * document.querySelector('#number').addEventListener('keyup',execOnlyNumbersMask);
 * @author Vinicius de Santana <vinicius.vts@gmail.com>
 * @license CC BY-NC
 */
function execOnlyNumbersMask(evt){
    let v = evt.target.value;
    v=v.replace(/\D/g,"");             //Remove tudo o que não é dígito
    evt.target.value = v;
}

/**
 * Máscara remove todos os caracteres que não sejam letras ou numeros
 * @param {KeyboardEvent} evt - O evento será entregue aqui
 * @example <caption>Executa a mascara quando evento keyup é lançado.</caption>
 * document.querySelector('#alphanumber').addEventListener('keyup',execOnlyAlphaNumber);
 * @author Vinicius de Santana <vinicius.vts@gmail.com>
 * @license CC BY-NC
 */
function execOnlyAlphaNumber(evt){
    let v = evt.target.value;
    v=v.replace(/[^a-zA-Z0-9]/g,"");
    evt.target.value = v;
}