Skip to content

Instantly share code, notes, and snippets.

@rg3915

rg3915/index.html

Created April 6, 2024 19:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rg3915/ab50f17be239a1c4d101708160665d31 to your computer and use it in GitHub Desktop.
Save rg3915/ab50f17be239a1c4d101708160665d31 to your computer and use it in GitHub Desktop.
Download ZIP
Mask mascara VanillaMasker mask JS
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="shortcut icon" href="http://html5-training-in-hyderabad.blogspot.com.br/favicon.ico">
<title>Mask</title>
<!-- PicoCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
<!-- vanilla-masker -->
<!-- https://vanilla-masker.github.io/vanilla-masker/ -->
<script src="https://cdn.jsdelivr.net/npm/vanilla-masker@1.1.1/build/vanilla-masker.min.js"></script>
</head>
<body>
<div>
<label>Preço</label>
<input
id="preco"
type="text"
>
<label>PBTC</label>
<input
id="pbtc"
type="text"
maxlength="4"
placeholder="99,9"
>
<label>Comprimento</label>
<input
id="comprimento"
type="text"
maxlength="5"
placeholder="99,99"
>
<label>Tara</label>
<input
id="tara"
type="text"
maxlength="6"
placeholder="99,999"
>
<label>CMT</label>
<input
id="cmt"
type="text"
maxlength="4"
placeholder="99.9"
>
<label>CPF</label>
<input
id="cpf"
type="text"
maxlength="14"
placeholder="000.000.000-00"
>
<label>CNPJ</label>
<input
id="cnpj"
type="text"
maxlength="18"
placeholder="00.000.000/0000-00"
>
<label>Placa Mercosul</label>
<input
id="placaMercosul"
type="text"
style="text-transform:uppercase"
maxlength="8"
placeholder="AAA-0A00"
>
<label>Telefone</label>
<input
id="telefone"
type="text"
maxlength="14"
placeholder="(99) 9999-9999"
>
<label>CEP</label>
<input
id="cep"
type="text"
maxlength="9"
placeholder="00000-000"
>
</div>
<script>
VMasker(document.querySelector("#preco")).maskMoney()
VMasker(document.querySelector("#pbtc")).maskMoney({
precision: 1,
separator: ',',
})
VMasker(document.querySelector("#comprimento")).maskMoney({
precision: 2,
separator: ',',
})
VMasker(document.querySelector("#tara")).maskMoney({
precision: 3,
separator: ',',
})
VMasker(document.querySelector("#cmt")).maskMoney({
precision: 1,
separator: '.',
})
VMasker(document.querySelector("#cpf")).maskPattern("999.999.999-99")
VMasker(document.querySelector("#cnpj")).maskPattern("99.999.999/9999-99")
VMasker(document.querySelector("#placaMercosul")).maskPattern("AAA-9S99")
VMasker(document.querySelector("#telefone")).maskPattern("(99) 9999-9999")
VMasker(document.querySelector("#cep")).maskPattern("99999-999")
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment