Two jquery masks in a field

Question

Two jquery masks in a field

Asked 6 years, 7 months ago

Viewed 490 times

3

someone can help me?

I have an input in which it is CPF/CNPJ, how do I make a mask containing two different values for the same field? And what would the code look like containing an additional phone field? In other words, it masks the Cpf/cnpj input and masks the phone, I only got it from Cpf, I can’t get it from the phone together!

<input type="text" name="cpf" id="cpf">
<input type="text" name="tel" id="tel">

$(document).ready(function(){
var SPMaskBehavior = function (val) {
return val.replace(/\D/g, '').length === 11 ? '000.000.000.00' : '00.000.000/0000-01';
},
spOptions = {
onKeyPress: function(val, e, field, options) {
field.mask(SPMaskBehavior.apply({}, arguments), options);
}
};

$('#cpf').mask(SPMaskBehavior, spOptions);
});

https://igorescobar.github.io/jQuery-Mask-Plugin/

2 answers

1

This code works, extracts from the documentation:

var options =  {
  onKeyPress: function(cpf, e, field, options) { //Quando uma tecla for pressionada
    var masks = ['000.000.000-000', '00.000.000/0000-01']; //Mascaras
    var mask = (cpf.length > 14) ? masks[1] : masks[0]; //Se for de tamanho 11, usa a 2 mascara
    $('#cpf').mask(mask, options); //Sobrescreve a mascara
}};

$('#cpf').mask('000.000.000-000', options); //Aplica a mascara

did not work, is not making the change of the mask when I type more than 11 digits to go to CNPJ, in fact it does not even let me type more than 11 digits, what can be @francisco

– Jean

2018/04/16 at 11:48
@Jean Editei the answer, try agr.

– Francisco

2018/04/16 at 12:11
now only in the mask of CNPJ :( @francisco

– Jean

2018/04/16 at 12:22
what may be wrong @francisco http://jsfiddle.net/xpvt214o/133425/

– Jean

2018/04/16 at 13:02
I changed the answer

– Francisco

2018/04/16 at 13:15
perfect @francisco, the one from Cpf/cnpj worked right! I tried to adapt the code now for another need, but it is not working as at the beginning of Cpf. I have a fixed/cellular field... fixed follows the pattern (00) 1234-5678 already the cell has an extra digit in the first 5 decimal places (00) 12345-6789 as I can adapt the code, since I tried and did not work, see the masks as http://jsfiddle.net/xpvt214o/133983/

– Jean

2018/04/16 at 13:55
@Jean Funcionando -> http://jsfiddle.net/3o5fbk5f/2/

– Francisco

2018/04/16 at 16:44
Many thanks @francisco for your dedicated time!

– Jean

2018/04/16 at 16:54
@Jean gives an upvote and marks the answer as correct pfv

– Francisco

2018/04/16 at 17:35
hi @francisco went to implement the code of Cpf mask, however I saw that it is not working properly, the mask of Cpf is not correct, when you type the last digit of Cpf it already changes to cnpj mask, what can be? https://jsfiddle.net/1bt5k8mr/

– Jean

2018/04/29 at 16:12
I edited the answer

– Francisco

2018/04/30 at 20:14
now this perfect @francisco, mto thanks!

– Jean

2018/04/30 at 22:07

Show 7 more comments

Browser other questions tagged javascript jquery

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

by Lollipop • **4,918** points · Answer 1 · 2018-04-16T13:09:52+00:00

You can use the toggleClass and alternate the Mask

Follow example code:|

$(document).ready(function() {



  $(".cpf_cnpj").mask("999.999.999-99").attr('placeholder', '000.000.000-00');
  
  $('.toggle').click(function() {
    $("#transaction_id").toggleClass('cpf_cnpj phone');
    $("#transaction_id").val('');
    $(".cpf_cnpj").mask("99.999.999/9999-99").attr('placeholder', '00.000.000/0000-00');
    $(".phone").mask("(999) 999-9999").attr('placeholder', '(999)999-9999');
  })



  $("#transaction_id").on("blur", function() {
    var last = $(this).val().substr($(this).val().indexOf("-") + 1);

    if (last.length == 3) {
      var move = $(this).val().substr($(this).val().indexOf("-") - 1, 1);
      var lastfour = move + last;

      var first = $(this).val().substr(0, 9);

      $(this).val(first + '-' + lastfour);
    }
  });
});

.toggle {
  display: inline-block;
  background: grey;
  border-radius: 5px;
  border: 1px solid #000;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<div>
  <form role="search" class="navbar-form navbar-left" id="form2" name="form2">
    <div class="form-group">
      <label for="input">Clique para alternar</label>
      <div class="input-group">
        <span class="toggle">Alternar</span>
        
        <input type="text" name="transaction_id" id="transaction_id" class="form-control cpf_cnpj fone" placeholder="CPF, CNPJ ou Telefone" autofocus>
        

      </div>
    </div>
  </form>
</div>