Apply jQuery mask to Modal

Asked

Viewed 425 times

1

I have the following modal:

<div class="modal fade" id="anti_fraude_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Digite seu CPF</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <input type="text" class="form-control cpf_antifraude masked-input" id="anti_fraude_cpf" name="anti_fraude_cpf">
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
            <button type="button" class="btn btn-primary" id="anti_frade_continuar">Continuar...</button>
         </div>
      </div>
   </div>
</div>

And I need to apply the mask in the CPF field. I tried it as follows:

$("#anti_fraude_modal").modal('show');
var $MaskedInput = $('.masked-input');
$MaskedInput.find('.cpf_antifraude').inputmask('999.999.999-99', { placeholder: '___.___.___-__' });

But did not apply the mask, but also did not fail.

I started the mask when I load the main page normally.

jquery

1 answer

2


The way you apply the mask is correct, the problem is in the way you define the element on which the mask will be applied.

When using the method .find() you are looking for descendants of the element, being that the $MaskedInput is already the very element you seek.

Gave no error because simply no element was found according to that selector.

Otherwise, your code works perfectly.

/*var $MaskedInput = $('.masked-input');
$MaskedInput.find('.cpf_antifraude').inputmask('999.999.999-99', { placeholder: '___.___.___-__' });*/

var $MaskedInput = $('.masked-input');
$MaskedInput.inputmask('999.999.999-99', {
  placeholder: '___.___.___-__'
});
<script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>

<input type="text" class="form-control cpf_antifraude masked-input" id="anti_fraude_cpf" name="anti_fraude_cpf">

Browser other questions tagged jquery

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