none
Jquery mask para o input RRS feed

  • Pergunta

  • Boa tarde criei um formulário e queria colocar mascara no input do telefone e do celular, só que não esta funcionando não sei porque, se alguém poder me ajudar ficaria grato....

    HTML

        <!-- Formulario -->
        <form>
            <div class="modal fade bg-model-rgba" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Solicite seu Hotsite agora!</h4>
                        </div>
                        <figure>
                            <img src="images/img-modal.png" class="img-responsive img-modal" alt="" title="">
                        </figure>
                        <div class="modal-body campos">
                            <div class="row">
                                <p class="bg-info bg-info-modificacao">Preencha o formulário abaixo que entraremos em contato.<br/><b>Falta pouco para iniciar seu Hotsite!</b></p>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 margin10">
                                    <input type="text" required class="form-control2 width input-page" placeholder="Digite seu Nome" autofocus />
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 margin10">
                                    <input type="email" required class="form-control2 width input-page" placeholder="Informe seu E-mail" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin10">
                                    <input type="text" required class="form-control2 width input-page" placeholder="Nome do Estabelecimento" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 margin10">
                                    <select class="form-control2 width select-page" required>
                                        <small>Ramo de atuação</small>
                                        <option>Industrial</option>
                                        <option>Vendas</option>
                                        <option>Alimentos</option>
                                        <option>Beleza</option>
                                        <option>Esportes</option>
                                    </select>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 margin10">
                                    <select class="form-control2 width select-page" required>
                                        <small>Cidade</small>
                                        <option>São Bernardo do Campo</option>
                                        <option>Santo André</option>
                                        <option>São Caetano do Sul</option>
                                        <option>Diadema</option>
                                        <option>Mauá</option>
                                        <option>Ribeirão Pires</option>
                                        <option>Rio Grande da Serra</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 margin10">
                                    <input type="tel" id="Telefone" name="Telefone" required class="form-control2 width input-page" placeholder="Telefone (xx) xxxx-xxxx">
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 margin10">
                                    <input type="tel" id="Celular" name="Celular"    required class="form-control2 width input-page"  placeholder="Celular (xx)xxxxx-xxxx">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin10">
                                    <textarea type="text" class="form-control2 width text-page" placeholder="Digite sua Mensagem" rows="3"></textarea>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                            <input type="submit" class="btn btn-primary" value"Enviar" />
                        </div>
                    </div>
                </div>
            </div>
        </form>

    Script

    <script>
            $(document).ready(function() {
                $("#Telefone").mask("9999-9999");
                $("#Celular").mask("99999-9999");
            });
            </script>

    Plugin

        <!-- jQuery -->
            <script src="js/jquery.min.js"></script>
            <!-- jQuery Easing -->
            <script src="js/jquery.easing.1.3.js"></script>
            <!-- Bootstrap -->
            <script src="js/bootstrap.min.js"></script>
            <!-- Waypoints -->
            <script src="js/jquery.waypoints.min.js"></script>
            <!-- Owl Carousel -->
            <script src="js/owl.carousel.min.js"></script>
            <!-- Main JS -->
            <script src="js/main.js"></script>

            <script src="js/modernizr-2.6.2.min.js"></script>
            <script src="jquery.js" type="text/javascript"></script>
            <script src="jquery.maskedinput.js" type="text/javascript"></script>

    terça-feira, 22 de março de 2016 19:28

Respostas

  • Você está chamando o seletor do jQuery antes de carregar o próprio jQuery, ou seja, passe a primeira tag <script> (que contém seu código) para baixo das suas bibliotecas JS. Fica assim:

        <!-- jQuery -->
            <script src="js/jquery.min.js"></script>
            <!-- jQuery Easing -->
            <script src="js/jquery.easing.1.3.js"></script>
            <!-- Bootstrap -->
            <script src="js/bootstrap.min.js"></script>
            <!-- Waypoints -->
            <script src="js/jquery.waypoints.min.js"></script>
            <!-- Owl Carousel -->
            <script src="js/owl.carousel.min.js"></script>
            <!-- Main JS -->
            <script src="js/main.js"></script>
    
            <script src="js/modernizr-2.6.2.min.js"></script>
            <script src="jquery.js" type="text/javascript"></script>
            <script src="jquery.maskedinput.js" type="text/javascript"></script>
    
    <script>
            $(document).ready(function() {
                $("#Telefone").mask("9999-9999");
                $("#Celular").mask("99999-9999");
            });
            </script>

    quarta-feira, 23 de março de 2016 00:15