How to put mascara in the form input field that is in a modal bootstrap window

Asked

Viewed 1,283 times

2

Guys, I’m using jquery Mask at head

<script type="text/javascript"> 
            $( document ).ready(function() {
                $("#celular1").mask("(00) 00000-0000");
                });
            });
</script>

I am connected with jquery and jquery Mask in the head of html, a normal form works but the modal window I am using to register customers does not receive the mask when typing. How can I make the input receive the mask?

html jquery twitter-bootstrap

  • https://github.com/igorescobar/jQuery-Mask-Plugin/issues/72#issuecomment-283339555

  • 1

    Aren’t you using a "});" too much? And have you checked in the element inspector if this modal pulls your head?

1 answer

1

Strange guy, here in the example is running the mask inside the modal normally, see if the file Mask is referenced on the page where the modal is opened:

$(function() {
  $('#tel').mask('(00) 0 0000-0000');
  $('#cep').mask('00000-000');
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Abrir modal
</button>

<div class="modal fade" id="exampleModal" 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">Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="tel">Telefone</label>
            <input type="email" class="form-control" id="tel" aria-describedby="tel" placeholder="Telefone">
            <small id="tel" class="form-text text-muted">Digite seu telefone.</small>
          </div>
          <div class="form-group">
            <label for="cep">Cep</label>
            <input type="text" class="form-control" id="cep" placeholder="CEP">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary">Salvar</button>
      </div>
    </div>
  </div>
</div>

  • Okay, I’ll try it if you give me a warning, thank you :)

  • So it’s not working :( Must be something in my code

  • The Mask file is being called on the page containing the modal?

Browser other questions tagged html jquery twitter-bootstrap

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