Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

wneo

Mascara de CPF e CNPJ

Por , em Javascript

Recommended Posts

wneo    5

wneo
Postado

Bom dia!!!

 

Preciso que um input text tenha mascara de cpf e cnpj. O masked input jquery é mto bom para isso, porém, a questão é que essa mascara é de entrada, ou seja, quando eu clico no input ele já está definido para receber o js respectivo a sua mascara. E eu preciso que o mesmo campo tenha uma condição, que indentifique se o usuario digitou mais de 11 caracteres, então dessa forma altera a mascara para cnpj...

 

Vou colocar aqui o script do masked input:

<script type="text/javascript">
$(document).ready(function(){
	$(function(){
		$.mask.addPlaceholder("~","[+-]");
		$("#telefone").mask("(99) 9999-9999");
		$("#cep").mask("99999-999");
		$("#data").mask("99/99/9999");
		$("#cpf").mask("999.999.999-99");
		$("#cnpj").mask("99.999.999/9999-99");
	});
});
</script>

Alguem sabe como tornar esse script condicionavel a minha questão? Ou até mesmo alguma outra forma de se fazer com javascript e até php?

Compartilhar este post

Link para o post
Compartilhar em outros sites

wneo    5

wneo
Postado

o Jquery Mask tem um método unmask, que remove a mascara, ai você pode definir outra mascara.

 

http://igorescobar.github.io/jQuery-Mask-Plugin/

Oi extreme boa tarde!

Toh olhando o link que vc me enviou...

Vc saberia me dizer como ficaria nesse caso, onde eu preciso que o mesmo input possa detectar duas mascaras diferentes, baseando-se pela quantidade de caracteres?

Compartilhar este post

Link para o post
Compartilhar em outros sites

ExtremsX    58

ExtremsX
Postado

Você coloca um evento no elemento que dirá se é um CNPJ ou um CPF.

 

Ao alterar, vc da um unmask, e logo em seguida o mask com a nova mascara

Compartilhar este post

Link para o post
Compartilhar em outros sites

wneo    5

wneo
Postado

Você coloca um evento no elemento que dirá se é um CNPJ ou um CPF.

 

Ao alterar, você da um unmask, e logo em seguida o mask com a nova mascara

Hmmm certo,

Vou tentar montar então...eu só fiz ateh hj, com o masked input, vamos como ficaria com o mask plugin:

<script>

$(document).ready(function(){

$('#input1').mask('000.000.000-00'),

 

$('#input1')..unmask('000.000.000-00'),

 

$('#input1').mask('99.999.999/0001-99'),

 

});

 

</script>

 

Cpf/cnpj: <input type="text" id="input1" />

 

...Isso?

Como ficaria a condição, para detectar em que momento ocorre o unmask, ou seja, quando digitar acima de 11 digitos(cpf), aplicar a mascara de cnpj?

Compartilhar este post

Link para o post
Compartilhar em outros sites

wneo    5

wneo
Postado

Existe um checkbox? ou é pela quantidade de caracteres?

Sim, com quantidade de caracteres, é minha missão inicial... em ultimo caso, bem em ultimo mesmo, talvz até não seja viavel... utilizaremos uma check... porq a disposição dos inputs no form de cadastro já está milimetricamente encaixado..

Compartilhar este post

Link para o post
Compartilhar em outros sites

ExtremsX    58

ExtremsX
Postado

Tente algo como:

 

$('#campo').keydown(function() {
    var el = $(this);
    
    if (el.val().length > 9) {
        el.unmask('000.000.000-00');
        el.mask('99.999.999/0001-99')
    } else {
        el.unmask('99.999.999/0001-99');
        el.mask('000.000.000-00');
    }
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

wneo    5

wneo
Postado

 

Tente algo como:

 

$('#campo').keydown(function() {
    var el = $(this);
    
    if (el.val().length > 9) {
        el.unmask('000.000.000-00');
        el.mask('99.999.999/0001-99')
    } else {
        el.unmask('99.999.999/0001-99');
        el.mask('000.000.000-00');
    }
});

 

Seguindo seu exemplo, criei esse arquivo:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../src/jquery.mask.js"></script>

<script>
$(document).ready(function(){
$('#input1').keydown(function() {
    var el = $(this);
    
    if (el.val().length > 9) {
        el.unmask('000.000.000-00');
        el.mask('99.999.999/0001-99')
    } else {
        el.unmask('99.999.999/0001-99');
        el.mask('000.000.000-00');
    }
});
});
</script>

</head>
<body>

Cpf/cnpj: <input type="text" id="input1" />

</body>

 
</html>

Para inserção do cnpj, está ok, mas para o cpf não.. o cpf sai nesse formato: 00.011.155/550

mas é quase issooo,

e agora???

 

Tente algo como:

 

$('#campo').keydown(function() {
    var el = $(this);
    
    if (el.val().length > 9) {
        el.unmask('000.000.000-00');
        el.mask('99.999.999/0001-99')
    } else {
        el.unmask('99.999.999/0001-99');
        el.mask('000.000.000-00');
    }
});

 

Consegui obter o resultado dessa forma!!!! :yes:

<script>
$(document).ready(function(){
$('#input1').keydown(function() {
    var el = $(this);
    
    if (el.val().length > 13) {
        el.unmask('000.000.000-00');
        <!--el.cleanVal('000.000.000-00');-->
        el.mask('99.999.999/0001-99')
    } else {
<!--el.cleanVal('000.000.000-00');-->
        <!--el.mask('99.999.999/0001-99');-->
        el.mask('000.000.000-00');
    }
});
});
</script>

Obrigado pela luz extreme!!!!!

 

Tente algo como:

 

$('#campo').keydown(function() {
    var el = $(this);
    
    if (el.val().length > 9) {
        el.unmask('000.000.000-00');
        el.mask('99.999.999/0001-99')
    } else {
        el.unmask('99.999.999/0001-99');
        el.mask('000.000.000-00');
    }
});

 

Consegui obter o resultado dessa forma!!!! :yes:

<script>

$(document).ready(function(){

$('#input1').keydown(function() {

var el = $(this);

 

if (el.val().length > 13) {

el.unmask('000.000.000-00');

<!--el.cleanVal('000.000.000-00');-->

el.mask('99.999.999/0001-99')

} else {

<!--el.cleanVal('000.000.000-00');-->

<!--el.mask('99.999.999/0001-99');-->

el.mask('000.000.000-00');

}

});

});

</script>

Obrigado pela luz extreme!!!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

wneo    5

wneo
Postado

Olá,

me surgiu mais uma questão em cima disso... teria como limpar o input, caso o usuario digitar menos caracteres do que o necessario???

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito