Máscara com jQuery

Hoje mostrarei de maneira simples como fazer uma máscara utilizando jQuery. Caso queira o código basta clicar aqui.

1 – Primeiro vamos criar nosso arquivo HTML e já colocaremos o input de texto e importar nosso arquivo JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Máscara</title>
</head>
<body>
  <input type="text" id="cpf">
  <script src="index.js"></script>
</body>
</html>

2 – Vamos importar nosso jQuery e a jQuery mask e através dela que colocaremos a máscara que funcionara de maneira que o usuário esteja digitando.

3 – E no nosso arquivo JavaScript pegaremos nosso input através do ID e colocaremos a máscara

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-
v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" 
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" 
integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
  <title>Máscara</title>
</head>
<body>
  <input type="text" id="cpf">
  <script src="index.js"></script>
</body>
</html>

$(document).ready(function () {
  $('#cpf').mask('000.000.000-00');
});

4 – Caso você queria trocar e usar uma outra máscara como de CEP ou telefone, basta trocar os 0’s e colocar no formato desejado e vale lembrar que utilizar o jQuery abre oportunidades de melhorar a legibilidade do código e fazer de maneira mais rápida.

$(document).ready(function () {
  $('#cpf').mask('(00) 0.0000-0000');
});