Estou tentando desenvolver um plugin jQuery para mascarar campos. Obviamente existem vários na internet mas, estou tentando desenvolver um próprio para que eu possa personaliza-lo.
Até consegui desenvolver o plugin. O problema é que quando tento utiliza-lo em mais de um elemento na mesma pagina. Se for em apenas um elemento ele funciona que é uma beleza, mas, se for em mais de um ele sempre pega a configuração da última chamada.
Se alguém puder ajudar, agradecerei muito.
O código:
(function($) { $.fn.mascarasgerais = function(options) { config = $.extend({ formato : '##/##/####' }, options); console.log(config.formato); $(this).attr( 'maxlength', config.formato.length ); $(this).keyup(function(event){ var formato = config.formato; var novoValor = '', y, caracterMascara; var sValue = /([^0-9])/g; console.log(formato); if(event.keyCode != 8 && this.value.length <= formato.length) { var valor = this.value.replace(sValue, ""); y = 1; for(var x = 0; x < valor.length; x++) { caracterMascara = ((formato.charAt(y) == "-") || (formato.charAt(y) == ".") || (formato.charAt(y) == "/")) || ((formato.charAt(y) == "(") || (formato.charAt(y) == ")") || (formato.charAt(y) == " ")) novoValor += valor[x]; if( caracterMascara ) novoValor += formato[y++]; y++; } } else { novoValor = this.value.substring(0,10); } $(this).val(novoValor); }); return this; }; })(jQuery);
Forma de utilização que funciona:
$('#cpf').mascarasgerais({ formato: '###.###.###-##' });
Forma de utilização que da pau:
$('#cpf').mascarasgerais({ formato: '###.###.###-##' }); $('#cnpj').mascarasgerais({ formato: '##.###.###/####-##' });
Desde já, muito obrigado a todos!
GENNF