1

Estou com dificuldade de inserir uma mascara em um input, segue meus códigos:

Minha tela de login que quero inserir a mascara:

    <?php
/*
* Create by Andre Tohouca Lacomski on 28/03/2019
*/
defined('BASEPATH') OR exit ('No direct script access allowed');
 ?>

<div class="col-md-6 col-md-offset-3" ng-controller='ctrLogin'>
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="center">Autenticação</h3>
    </div><br>
    <div class="panel-body">
      <form>
        <div class="input-group">
          <span class="input-group-addon">CPF:</span>
          <input class="form-control cpfInput" ng-model="cpf">
        </div><br>
        <div class="input-group">
          <span class="input-group-addon">Senha: </span>
          <input class="form-control" type="password" ng-model="senha">
        </div><br>
          <label class="radio-inline">
            <input ng-model="tipo" type="radio" name="optradio" value="candidato" checked>Candidato </label>
          <label class="radio-inline">
            <input ng-model="tipo" type="radio" name="optradio" value="professor">Professor </label>
          <label class="radio-inline">
            <input ng-model="tipo" type="radio" name="optradio" value="admin">DIRPPG </label><br><br>
        <button class="btn btn-primary col-md-offset-5 col-xs-offset-5" type="submit" ng-click="login(cpf, senha, tipo)">Login</button>
      </form><br>
      <a class="pull-left" href="#!/candidato/cadastro_candidato">Criar conta</a>
      <a class="pull-right" href="#!recuperarsenha">Esqueceu a Senha?</a>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.cpfInput').mask('999.999.999-99');
});
</script>

Instalei o jquery e jquery-mask via npm e chamo eles na minha home desse jeito:

<!-- Jquery and Bootstrap-->
<script src="<?php echo base_url();?>node_modules/jquery/dist/jquery.js"></script>
<script src="<?php echo base_url();?>node_modules/jquery/dist/jquery.min.js"></script>
<script src="<?php echo base_url();?>node_modules/jquery-mask-plugin/dist/jquery.mask.min.js"></script>
<script src="<?php echo base_url();?>node_modules/jquery-mask-plugin/dist/jquery.mask.js"></script>
<script src="<?php echo base_url();?>node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Não sei se estou chamando errado, pois segui algumas dicas e sem sucesso. No outro sistema que utilizo a mascara funciona normal.

OBS: Não adianta eu trocar os npm por:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.min.js"></script>
2
  • Vc tb está carregando 2x a mesma biblioteca: "jquery.js" e "jquery.min.js", "jquery.mask.min.js" e "query.mask.js"... a diferença é que um é minimizado e outro não
    – Sam
    Commented 11/04/2019 às 14:59
  • Entendi, disso eu não sabia Commented 11/04/2019 às 15:51

2 Respostas 2

1

Na nova versão é 0 ao invés de 9, veja abaixo:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.min.js"></script>

<script>
  jQuery(document).ready(function(){
    jQuery('.cpfInput').mask('000.000.000-00');
  });
</script>

<input class="cpfInput">

5
  • Quando testo em arquivo separado ele funciona, mas quando junto com o meu projeto ele para de funcionar. Estou utilizando Angular pode estar havendo conflito pois tanto o jquery quanto angular utiliza $ Commented 11/04/2019 às 14:38
  • @AndreLacomski Tenta trocando o $ por jQuery
    – Sam
    Commented 11/04/2019 às 14:55
  • Ainda sem sucesso Commented 11/04/2019 às 15:51
  • @AndreLacomski ao inspecionar o projeto, vc consegue ver o jquery importado? Um possível teste a se fazer também é tentar executar algum comando jquery direto no console. Commented 11/04/2019 às 16:05
  • @AndréLins ele importa o jquery, vou pesquisando mais sobre, pois não é apenas esse erro que ocorre no projeto. O meu input radio não faz checked no campo que eu escolho Commented 12/04/2019 às 13:54
1

Resolvi o problema colocando meu link do jquery antes do bootstrap e do angular. Obrigado a todos pelas respostas!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .