Error in cpf mask

Asked

Viewed 168 times

1

I created a form but when I went to put mask in the CPF to look like this Ex.(000.000.000-00) does not assign

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="JS/funcoes.js"></script>
    <script src="JS/jquery-3.2.1.min.js"></script>
    <script src="jQuery-Mask-Plugin-master/src/jquery.mask.js"></script>
    <script src="JS/jquery-3.2.1.slim.min.js"></script>
</head>


if(event.keyCode !== 8){
        if(texto.length === 3 || texto.length === 7){
            document.getElementById("cpf").value == texto + ".";
        } else if(texto.length === 11){
            document.getElementById("cpf").value == texto + "-";
        }
    }
<form action="salvarregistro.php" method="POST">
            
 <input type="text" name="cpf" size="40" id="cpf" required="" placeholder="CPF xxx.xxx.xxx-xx" onkeyup="mascCPF(this.value)"><br><br>
            
            <button type="submit">Enviar dados</button>
            
            
        </form>

javascript html5

  • Related: https://answall.com/q/199264/57801

2 answers

4


For your code you can try it like this:

function mascCPF(texto) {
  if(event.keyCode != 8) {
    if(texto.length === 3 || texto.length === 7) {
        document.getElementById("cpf").value = texto + ".";
    } else if(texto.length === 11){
        document.getElementById("cpf").value = texto + "-";
    }
  }
}
<form action="salvarregistro.php" method="POST">
            
 <input type="text" name="cpf" size="40" maxlength="14" id="cpf" required="" placeholder="CPF xxx.xxx.xxx-xx" onkeydown="mascCPF(this.value)"><br><br>
            
            <button type="submit">Enviar dados</button>
            
            
        </form>

But I recommend you use a library to do that: jQuery-Mask-Plugin.

EDIT:

With jQuery-Mask-Plugin:

window.onload = function() {
  $('#cpf').mask('999.999.999-99');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.12/jquery.mask.min.js"></script>

<form action="salvarregistro.php" method="POST">
            
 <input type="text" name="cpf" size="40" id="cpf" required="" placeholder="CPF xxx.xxx.xxx-xx"><br><br>
            
    <button type="submit">Enviar dados</button>


</form>

  • It didn’t work, I put the library excerpt to help with the answer

  • @Ruanrodrigues edited the answer, and put an example with the plugin!

  • This snippet here - window.onload = Function() { $('#Cpf'). Mask('999.999.999-99'); } - I insert it into my.js file?

  • Yes, sir!!!!

  • Thank you very much, you helped me a lot!

1

Another way also to help, if you are using bootstrap, just do it in a very simple way. But to work it must have imported jQuery.Mask library

<script type="text/javascript" src="js/bootstrap-notify.min.js"></script>

<script type="text/javascript" src="js/jquery.mask.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('#cpf').mask('000.000.000-00');
        $('#rg').mask('00.000.000-0');
    });
</script>

<div class="col-lg-12">                             
    <div class="col-lg-5">
        <label for="ex1">CPF:</label>
        <input type="text" class="form-control" id="cpf" maxlength="11"  name="cpf" placeholder='___.___.___-__'><br>
    </div>
</div>

<div class="col-lg-12">  
  <div class="col-lg-5">
       <label for="ex1">RG:</label>
       <input type="text" class="form-control" id="rg" maxlength="9"  name="rg" placeholder='__.___.___-_'><br>
  </div>
</div>

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.