Apply jQuery mask in Modal

Question

Apply jQuery mask in Modal

Navigation

#1 by (2 votes)

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>

You need to apply the mask in the CPF field. I tried the following:

$("#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 give an error.

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

jquery

asked by anonymous 05.03.2018 / 17:40

1 answer

How to fix a Bug loading a Fragment inside another Fragment? Pass array of images in FormData ()

score 2 · Accepted Answer

The way you apply the mask is correct, the problem is how you define the element the mask will be applied to.

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

It did not give any error because simply no element was found according to that selector.

For the rest, 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><scriptsrc="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">