Máscaras automáticas para telefone (8 ou 9 dígitos), CPF, CNPJ e CEP

More
2 years 4 months ago #122153 by leandroarndt
leandroarndt created the topic: Máscaras automáticas para telefone (8 ou 9 dígitos), CPF, CNPJ e CEP
Estava tendo problemas para implementar máscaras aos meus campos (parecia que a proteção XSS estava habilitada), então resolvi tomar outra abordagem, automatizando a aplicação das máscaras através de um script no arquivo template.js do modelo em uso.

Primeiro, é preciso adicionar o seguinte antes de fechar o elemento <head> em startpage.pstpl:
<script type="text/javascript" src=" https://cdn.rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>

Depois, deve-se inserir o seguinte código na função $(document).ready() de template.js:
function() { // Easy creation of masks according to the validation regular expression
	// New validation function
	var validate = function(qid, input, length) {
		var v = function(l) {
			if (input.value.length == l) {
				$('#vmsg_'+qid+'_regex_validation').removeClass('error').addClass('good');
				$("#"+input.id).removeClass('error').addClass('good');
				return true;
			}
			else {
				$('#vmsg_'+qid+'_regex_validation').removeClass('good').addClass('error');
				$("#"+input.id).removeClass('good').addClass('error');
				return false;
			}
		}
 
		if (!isNaN(length)) { // We got a numeric length
			v(length);
		} else { // We got an array of allowed lengths
			for (var i = 0; i<length.length; i++) {
				if (v(length[i])) { break; }
			}
		}
	}
 
	// telefone and telefoneOptions come from http://igorescobar.github.io/jQuery-Mask-Plugin/
 
	var telefone = function (val) {
		return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
	}
 
	var telefoneOptions = {
		onKeyPress: function(val, e, field, options) {
			field.mask(telefone.apply({}, arguments), options);
		}
	}
 
	// Our mask-options-regex-length correpondences
	var masks = [
			 ["00.000.000/0000-00", {}, "/^[0-9]{2}\\\\.[0-9]{3}\\\\.[0-9]{3}\\\\/[0-9]{4}-[0-9]{2}$/", 18], // CNPJ
			 ["00000-000", {}, "/^[0-9]{5}-[0-9]{3}$/", 9], // CEP
			 ["000.000.000-00", {}, "/^[0-9]{3}.[0-9]{3}.[0-9]{3}-[0-9]{2}$/", 14], // CPF
			 [telefone, telefoneOptions, "/^\\\\([0-9]{2}\\\\) [0-9]{4,5}-[0-9]{4}$/", [14, 15]], // 8 or 9-digit Brazilian telephone numbers
			 ];
 
	// Form pairs of [qid, regex] for later search 
	var scripts = $("script")
	var regexes = []
	for (var i=0; i<scripts.length; i++) {
 
		// We first try to get qid from the line "function LEMval????(sgqa){"
		var script = scripts[i].innerHTML;
		var currIndex = scripts[i].innerHTML.indexOf("function LEMval");
		while (currIndex >= 0) {
			script = script.substring(currIndex+15); // Get rid of "function LEMval"
			if (!isNaN(script.substring(0,1))) { // We found a qid after "function LEMval"
				var valqid = script.substring(0,script.indexOf("("));
 
				// Now we try to get the validation regex, which is delimited by double
				// quotes as in LEMregexMatch("/^[0-9]{2}-[0-9]{8,9}$/"
				var regex = script.substring(script.indexOf("LEMregexMatch(\"")+15);
				regex = regex.substring(0, regex.indexOf("\""));
 
				// If we find it, appendo to regexes list as a pair of [qid, regex]
				regexes.push([valqid, regex]);
			}
			currIndex = script.indexOf("function LEMval"); // Next...
		}
	}
 
	// Iterate through found questions and create masks
	for (var i=0; i<regexes.length; i++) {
		var qid = regexes[i][0];
		var input = $("#question"+qid+" input")[0];
		for (var ii=0; ii<masks.length; ii++) {
			if (masks[ii][2] == regexes[i][1]) {
				var length = masks[ii][3];
				$("#"+ input.id).mask(masks[ii][0], masks[ii][1], masks[ii][2]);
				// We now have to manipulate validation functions. We may have a delay on mask update
				window["LEMval"+qid] = function (a, b, c) {
					return function(sgqa) {
						setTimeout(validate(a, b, c), 500);
					}
				}(qid, input, length); // We must separate from the outer scope
				$("#"+ input.id).focusout(window["LEMval"+qid]);
			}
		}
	}
}

Então você terá máscaras automáticas para telefone, CEP, CPF e CNPJ (e outras que você resolver adicionar)! As expressões regulares correspondentes são:

• Telefone: /^\([0-9]{2}\) [0-9]{4,5}-[0-9]{4}$/
• CPF: /^[0-9]{3}.[0-9]{3}.[0-9]{3}-[0-9]{2}$/
• CNPJ: /^[0-9]{2}\.[0-9]{3}\.[0-9]{3}\/[0-9]{4}-[0-9]{2}$/
• CEP: /^[0-9]{5}-[0-9]{3}$/

No script, se vocês forem criar outras máscaras, no lugar de cada barra invertida é preciso colocar quatro, porque senão "escapadas".
The following user(s) said Thank You: cristiano01

Please Log in to join the conversation.

Moderators: marciojv

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!