- Posts: 2
- Thank you received: 1
- Forum
- Localized forums
- Portuguese forum
- Máscaras automáticas para telefone (8 ou 9 dígitos), CPF, CNPJ e CEP
Máscaras automáticas para telefone (8 ou 9 dígitos), CPF, CNPJ e CEP
- leandroarndt
-
Topic Author
- Offline
- Fresh Lemon
-
Less
More
2 years 9 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:
Depois, deve-se inserir o seguinte código na função $(document).ready() de template.js:
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".
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 or Create an account to join the conversation.