Recomendo que utilize o plugin jQuery masked input, ele é melhor que o mask plugin
.
Exemplo de uso do masked input
funcionando com um esquema semelhante de CPF e CNPJ em um mesmo campo:
jQuery(function($){
$('.cpf-cnpj').change(function(){
var campo = $(this).val();
if (campo == "cpf"){
$("#label-cpf-cnpj").html('CPF');
$("#InputCpf-cnpj").mask("999.999.999-99");
}
else if (campo == "cnpj"){
$("#label-cpf-cnpj").html('CNPJ');
$("#InputCpf-cnpj").mask("99.999.999/9999-99");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.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">
Fiz alguns testes aqui copiando e colando CPFs e/ou CNPJs completos com o plugin em questão e funciona normalmente.
Exemplo de uso do mask plugin
para visualizar a diferença entre os dois:
jQuery(function($){
$('.cpf-cnpj').change(function(){
var campo = $(this).val();
if (campo == "cpf"){
$("#label-cpf-cnpj").html('CPF');
$("#InputCpf-cnpj").mask("999.999.999-99");
}
else if (campo == "cnpj"){
$("#label-cpf-cnpj").html('CNPJ');
$("#InputCpf-cnpj").mask("99.999.999/9999-99");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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">
Observe que utilizando o masked input
, quando o usuário clica no campo a máscara já é exibida inteira facilitando para o mesmo a visualização de quantos dígitos deverá inserir no campo, diferente do mask plugin
, em que a máscara só vai aparecendo aos poucos à medida que o usuário vai inserindo os dígitos do CPF ou CNPJ.
Edit: Segue então novo exemplo sem utilizar o radio
para selecionar CPF ou CNPJ:
$(document).ready(function () {
$("#InputCpf-cnpj").mask("999.999.999-99?99999");
$('#InputCpf-cnpj').keyup(function (e) {
var query = $(this).val().replace(/[^a-zA-Z 0-9]+/g,'');
if (query.length == 11) {
$("#label-cpf-cnpj").html('CPF');
$("#InputCpf-cnpj").mask("999.999.999-99?99999");
}
if (query.length == 14) {
$("#label-cpf-cnpj").html('CNPJ');
$("#InputCpf-cnpj").mask("99.999.999/9999-99");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<br>
<label id="label-cpf-cnpj">CPF/CNPJ</label><input id="InputCpf-cnpj" type="text">