Skip to content

Instantly share code, notes, and snippets.

@fdaciuk

fdaciuk/01 - Masks in Vanilla JS.md

Last active August 1, 2025 18:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fdaciuk/1ffb6fe2d76664894db189e04043fb21 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fdaciuk/1ffb6fe2d76664894db189e04043fb21 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. fdaciuk revised this gist Jan 13, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 01 - Masks in Vanilla JS.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,4 +2,4 @@

    YouTube video: https://www.youtube.com/watch?v=r-8isv_TnVA

    Codesandbox: https://codesandbox.io/s/vanilla-js-masks-45ff8n
    Stackblitz: https://stackblitz.com/edit/js-mbehz9?file=index.js
  2. fdaciuk revised this gist Jan 13, 2023. 2 changed files with 10 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -74,6 +74,13 @@ const masks = {
    .replace(/(-\d{2})(\d)/, '$1-$2')
    .replace(/(-\d{4})\d+?$/, '$1')
    },

    hour (value) {
    return value
    .replace(/\D+/g, '')
    .replace(/(\d{2})(\d)/, '$1:$2')
    .replace(/(:\d{2})\d+?$/, '$1')
    },
    }

    document.querySelectorAll('input').forEach($input => {
    3 changes: 3 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,4 +30,7 @@
    <label>Data (usando traço como separador): 00-00-0000</label>
    <input type="text" data-js="dateWithDashes">

    <label>Hora: 00:00</label>
    <input type="text" data-js="hour" />

    <script type="module" src="./app.js"></script>
  3. fdaciuk renamed this gist Mar 23, 2022. 1 changed file with 0 additions and 0 deletions.
    0 01- Masks in Vanilla JS.md → 01 - Masks in Vanilla JS.md
    View file
    File renamed without changes.
  4. fdaciuk revised this gist Mar 23, 2022. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion 01- Masks in Vanilla JS.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    # Masks in Vanilla JS

    YouTube video: https://www.youtube.com/watch?v=r-8isv_TnVA
    YouTube video: https://www.youtube.com/watch?v=r-8isv_TnVA

    Codesandbox: https://codesandbox.io/s/vanilla-js-masks-45ff8n
  5. fdaciuk revised this gist Oct 13, 2021. 2 changed files with 13 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -27,6 +27,16 @@ const masks = {
    .replace(/(-\d{4})\d+?$/, '$1')
    },

    phoneDDI (value) {
    return value
    .replace(/\D+/g, '')
    .replace(/(\d{2})(\d)/, '+$1 $2')
    .replace(/(\d{2})(\d)/, '($1) $2')
    .replace(/(\d{4})(\d)/, '$1-$2')
    .replace(/(\d{4})-(\d)(\d{4})/, '$1$2-$3')
    .replace(/(-\d{4})\d+?$/, '$1')
    },

    cep (value) {
    return value
    .replace(/\D+/g, '')
    3 changes: 3 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,6 +12,9 @@
    <label>Telefone: (00) 00000-0000</label>
    <input type="text" data-js="phone">

    <label>Telefone com DDI: +00 (00) 00000-0000</label>
    <input type="text" data-js="phoneDDI" />

    <label>CEP: 00000-000</label>
    <input type="text" data-js="cep">

  6. fdaciuk revised this gist May 2, 2021. 2 changed files with 11 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -56,6 +56,14 @@ const masks = {
    .replace(/(\/\d{2})(\d)/, '$1/$2')
    .replace(/(\/\d{4})\d+?$/, '$1')
    },

    dateWithDashes (value) {
    return value
    .replace(/\D+/g, '')
    .replace(/(\d{2})(\d)/, '$1-$2')
    .replace(/(-\d{2})(\d)/, '$1-$2')
    .replace(/(-\d{4})\d+?$/, '$1')
    },
    }

    document.querySelectorAll('input').forEach($input => {
    3 changes: 3 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -24,4 +24,7 @@
    <label>Data: 00/00/0000</label>
    <input type="text" data-js="date">

    <label>Data (usando traço como separador): 00-00-0000</label>
    <input type="text" data-js="dateWithDashes">

    <script type="module" src="./app.js"></script>
  7. fdaciuk revised this gist May 2, 2021. 2 changed files with 12 additions and 1 deletion.
    10 changes: 9 additions & 1 deletion app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -47,7 +47,15 @@ const masks = {
    const cleanValue = +value.replace(/\D+/g, '')
    const options = { style: 'currency', currency: 'BRL' }
    return new Intl.NumberFormat('pt-br', options).format(cleanValue / 100)
    }
    },

    date (value) {
    return value
    .replace(/\D+/g, '')
    .replace(/(\d{2})(\d)/, '$1/$2')
    .replace(/(\/\d{2})(\d)/, '$1/$2')
    .replace(/(\/\d{4})\d+?$/, '$1')
    },
    }

    document.querySelectorAll('input').forEach($input => {
    3 changes: 3 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,4 +21,7 @@
    <label>Moeda: R$ 0.000.000,00</label>
    <input type="text" data-js="money">

    <label>Data: 00/00/0000</label>
    <input type="text" data-js="date">

    <script type="module" src="./app.js"></script>
  8. fdaciuk revised this gist Apr 6, 2021. 2 changed files with 0 additions and 0 deletions.
    0 Masks in Vanilla JS.md → 01- Masks in Vanilla JS.md
    View file
    File renamed without changes.
    0 gistfile1.txt → app.js
    View file
    File renamed without changes.
  9. fdaciuk created this gist Apr 6, 2021.
    3 changes: 3 additions & 0 deletions Masks in Vanilla JS.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    # Masks in Vanilla JS

    YouTube video: https://www.youtube.com/watch?v=r-8isv_TnVA
    59 changes: 59 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    const masks = {
    cpf (value) {
    return value
    .replace(/\D+/g, '')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d{1,2})/, '$1-$2')
    .replace(/(-\d{2})\d+?$/, '$1')
    },

    cnpj (value) {
    return value
    .replace(/\D+/g, '')
    .replace(/(\d{2})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d)/, '$1/$2')
    .replace(/(\d{4})(\d)/, '$1-$2')
    .replace(/(-\d{2})\d+?$/, '$1')
    },

    phone (value) {
    return value
    .replace(/\D+/g, '')
    .replace(/(\d{2})(\d)/, '($1) $2')
    .replace(/(\d{4})(\d)/, '$1-$2')
    .replace(/(\d{4})-(\d)(\d{4})/, '$1$2-$3')
    .replace(/(-\d{4})\d+?$/, '$1')
    },

    cep (value) {
    return value
    .replace(/\D+/g, '')
    .replace(/(\d{5})(\d)/, '$1-$2')
    .replace(/(-\d{3})\d+?$/, '$1')
    },

    pis (value) {
    return value
    .replace(/\D+/g, '')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{5})(\d)/, '$1.$2')
    .replace(/(\d{5}\.)(\d{2})(\d)/, '$1$2-$3')
    .replace(/(-\d)\d+?$/, '$1')
    },

    money (value) {
    const cleanValue = +value.replace(/\D+/g, '')
    const options = { style: 'currency', currency: 'BRL' }
    return new Intl.NumberFormat('pt-br', options).format(cleanValue / 100)
    }
    }

    document.querySelectorAll('input').forEach($input => {
    const field = $input.dataset.js

    $input.addEventListener('input', e => {
    e.target.value = masks[field](e.target.value)
    }, false)
    })
    24 changes: 24 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css" integrity="sha512-xiunq9hpKsIcz42zt0o2vCo34xV0j6Ny8hgEylN3XBglZDtTZ2nwnqF/Z/TTCc18sGdvCjbFInNd++6q3J0N6g==" crossorigin="anonymous" />
    <title>Vanilla JS Masks</title>

    <label>CPF: 000.000.000-00</label>
    <input type="text" data-js="cpf">

    <label>CNPJ: 00.000.000/0000-00</label>
    <input type="text" data-js="cnpj">

    <label>Telefone: (00) 00000-0000</label>
    <input type="text" data-js="phone">

    <label>CEP: 00000-000</label>
    <input type="text" data-js="cep">

    <label>PIS: 000.00000.00-0</label>
    <input type="text" data-js="pis">

    <label>Moeda: R$ 0.000.000,00</label>
    <input type="text" data-js="money">

    <script type="module" src="./app.js"></script>