Skip to content

Instantly share code, notes, and snippets.

@fdaciuk

fdaciuk/01 - Masks in Vanilla JS.md

Last active August 14, 2024 14:21
Show Gist options
  • Save fdaciuk/1ffb6fe2d76664894db189e04043fb21 to your computer and use it in GitHub Desktop.
Save fdaciuk/1ffb6fe2d76664894db189e04043fb21 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
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')
},
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, '')
.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)
},
date (value) {
return value
.replace(/\D+/g, '')
.replace(/(\d{2})(\d)/, '$1/$2')
.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')
},
hour (value) {
return value
.replace(/\D+/g, '')
.replace(/(\d{2})(\d)/, '$1:$2')
.replace(/(:\d{2})\d+?$/, '$1')
},
}
document.querySelectorAll('input').forEach($input => {
const field = $input.dataset.js
$input.addEventListener('input', e => {
e.target.value = masks[field](e.target.value)
}, false)
})
Raw
index.html
<!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>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">
<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">
<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">
<label>Hora: 00:00</label>
<input type="text" data-js="hour" />
<script type="module" src="./app.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment