3

estou tentando fazer uma máscara para CPF e CNPJ dentro do mesmo campo, o usuário pode escolher se quer preencher o CPF ou CNPJ através de dois RadioButtons, mas o problema é que eu não consigo mudar a máscara do campo quando alterno entre uma opção ou outra. Eu queria que quando o usuário clicasse em CPf a máscara assumisse o formato de cpf e o mesmo quando clicasse em cnpj. Estou fazendo a página utilizando ASP.net e também o Jquery-Mask-Plugin. Não sei por qual motivo, mas a função mask() não está funcionando no meu código, então optei por utilizar o atributo data-mask no próprio input. Eis o meu código:

$(document).ready(function () {

                 var $txtCpf = $("#<%=txtCPF.ClientID %>");
                 if ($("#<%=selectModeInsc.ClientID %> input").val() == "CPF"){
                    $txtCpf.attr("data-mask", "999.999.999-99");
                 }

                 $("#<%=selectModeInsc.ClientID %> input").click(function () {
                    if (valor == "CNPJ") {
                         $txtCpf.removeAttr("data-mask");
                         $txtCpf.attr("data-mask", "99.999.999/0001-99");
                     }
                 });

             });
<div class="col-lg-3">
                <div class="form-group">
                    <asp:RadioButtonList 
                        ID="selectModeInsc" runat="server" RepeatDirection="Horizontal">
                        <asp:ListItem Text="CPF" Value="CPF" Selected="True"/>
                        <asp:ListItem Text="CNPJ" Value="CNPJ"/>
                    </asp:RadioButtonList>
                    <asp:TextBox runat="server" ID="txtCPF" class="form-control" MaxLength="14" ></asp:TextBox>
                </div>
            </div>

Obs.: Eu já tentei de diversas maneiras, esse código acima é de uma das vezes que implementei.

6
  • A função mask não funciona? Adicionou o jquery certinho? Tem algum erro no console? O que tu tá fazendo atribuindo data-mask não vai adicionar uma máscara no teu input, só vai add um atributo data com esse valor, a menos que tu trate, ou tenha um plugin que faça, a conversão dessa propriedade em máscara. É o caso?
    – Aline
    6/07/2017 às 10:58
  • Eu adicionei o link para o plugin, já tentei com um link externo e também copiei o código para um arquivo em uma pasta do projeto, mas mesmo assim a função mask não funciona. O atributo data-mask funciona, com ele eu consigo deixar no formato cnpj ou cpf, o problema é que eu não consigo remover o atributo e colocar no outro formato quando troco no radiobutton. 7/07/2017 às 14:39
  • É exatamente o que eu disse: tu altera o data-mask, mas isso não quer dizer que aplicou o mask. Normalmente para o plugin atribuir/reatribuir os valores, tu precisa chamar uma função de init ou algo do gênero. Tu chama algo como: $(".cpf").mask(), no ready do documento?
    – Aline
    7/07/2017 às 16:33
  • Eu pensei que o atributo data-mask tinha a ver com o plugin, mas não tem, estava errando ai também. O problema é que o script do plugin não está funcionando mesmo, eu já fiz um código que coloco a função $txtCpf.mask(""). Eu criei outra página web form e deu certo, mas nessa página não funciona. Será que pode ser algum scritp que é carregado na página master (uma página que carrega o layout padrão)? 7/07/2017 às 18:09
  • Tu tá incluindo o js do mask, atribuindo no load: $(".classe").mask("999-999-999-99") e não dá nenhum erro no console? Só não aparece a máscara?
    – Aline
    7/07/2017 às 18:24

1 Resposta 1

2

Segue o script jQuery que você deverá implementar para realizar a troca de máscara de acordo com a opção selecionada pelo usuário, basta adequá-lo aos ids dos seus inputs e ao código em asp.net que você possui.

jQuery(function($){
  $('.cpf-cnpj').change(function(){
    var campo = $(this).val();
    if (campo == "cpf"){	
      $("#InputCpf-cnpj").val('');
      $("#label-cpf-cnpj").html('CPF');
      $("#InputCpf-cnpj").mask("999.999.999-99");
    }
    else if (campo == "cnpj"){
      $("#InputCpf-cnpj").val('');
      $("#label-cpf-cnpj").html('CNPJ');
      $("#InputCpf-cnpj").mask("99.999.999/9999-99");
    }			
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>

<input type="radio" class="cpf-cnpj" id="cpf-cnpj" name="cpf/cnpj" value="cpf"> CPF<br>
<input type="radio" class="cpf-cnpj" id="cpf-cnpj" name="cpf/cnpj" value="cnpj"> CNPJ<br>
<br>
<label id="label-cpf-cnpj">CPF/CNPJ</label> <input type="text" id="InputCpf-cnpj" name="cpf/cnpj">

1
  • Valeu amigo, eu vou tentar dessa forma, mas antes eu preciso ver qual é o problema com o meu código que não funciona a função mask. Obrigado pela ajuda!! 7/07/2017 às 14:40

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 .