-1
var corCompleta = "#99ff8f"
var corIncompleta = "#eff70b"
function ResetCampos() {
var textFields = document.getElementsByTagName("input");
for (var i = 0; i < textFields.length; i++) {
if (textFields[i].type == "text") {
textFields[i].style.backgroundColor = "";
textFields[i].style.borderColor = "";
}
}
}
function coresMask(t) {
var l = t.value;
var m = l.length;
var x = t.maxLength;
if (m == 0) {
t.style.borderColor = "";
t.style.backgroundColor = "";
} else if (m < x) {
t.style.borderColor = corIncompleta;
t.style.backgroundColor = corIncompleta;
} else {
t.style.borderColor = corCompleta;
t.style.backgroundColor = corCompleta;
}
}
function mascara(m, t, e, c) {
var cursor = t.selectionStart;
var texto = t.value;
texto = texto.replace(/\D/g, '');
var l = texto.length;
var lm = m.length;
if (window.event) {
id = e.keyCode;
} else if (e.which) {
id = e.which;
}
cursorfixo = false;
if (texto == '') return false;
if (texto.length != 14)
return false;
// Elimina CNPJs invalidos conhecidos
if (texto == "00000000000000" ||
texto == "11111111111111" ||
texto == "22222222222222" ||
texto == "33333333333333" ||
texto == "44444444444444" ||
texto == "55555555555555" ||
texto == "66666666666666" ||
texto == "77777777777777" ||
texto == "88888888888888" ||
texto == "99999999999999")
return false;
if (cursor < l) cursorfixo = true;
var livre = false;
if (id == 16 || id == 19 || (id >= 33 && id <= 40)) livre = true;
ii = 0;
mm = 0;
if (!livre) {
if (id != 8) {
t.value = "";
j = 0;
for (i = 0; i < lm; i++) {
if (m.substr(i, 1) == "#") {
t.value += texto.substr(j, 1);
j++;
} else if (m.substr(i, 1) != "#") {
t.value += m.substr(i, 1);
}
if (id != 8 && !cursorfixo) cursor++;
if ((j) == l + 1) break;
}
}
if (c) coresMask(t);
}
if (cursorfixo && !livre) cursor--;
t.setSelectionRange(cursor, cursor);
}
function ResetCampos() {
for (var o = document.getElementsByTagName("input"), e = 0; e < o.length; e++) "text" == o[e].type && (o[e].style.backgroundColor = "", o[e].style.borderColor = "")
}
function coresMask(o) {
var e = o.value,
r = e.length,
t = o.maxLength;
0 == r ? (o.style.borderColor = "", o.style.backgroundColor = "") : r < t ? (o.style.borderColor = corIncompleta, o.style.backgroundColor = corIncompleta) : (o.style.borderColor = corCompleta, o.style.backgroundColor = corCompleta)
}
function mascara(o, e, r, t) {
var l = e.selectionStart,
a = e.value;
a = a.replace(/\D/g, "");
var s = a.length,
c = o.length;
window.event ? id = r.keyCode : r.which && (id = r.which), cursorfixo = !1, l < s && (cursorfixo = !0);
var n = !1;
if ((16 == id || 19 == id || id >= 33 && id <= 40) && (n = !0), ii = 0, mm = 0, !n) {
if (8 != id)
for (e.value = "", j = 0, i = 0; i < c && ("#" == o.substr(i, 1) ? (e.value += a.substr(j, 1), j++) : "#" != o.substr(i, 1) && (e.value += o.substr(i, 1)), 8 == id || cursorfixo || l++, j != s + 1); i++);
t && coresMask(e)
}
cursorfixo && !n && l--, e.setSelectionRange(l, l)
}
var corCompleta = "",
corIncompleta = "";<!DOCTYPE html>
<html lang="en">
<head>
<title>Cadastro Novas Unidades Consumidoras</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico" />
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/formularios/resource/1559844563000/alertJs" type="text/javascript"></script>
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="js/mascara.min.js"></script>
<script language="jquery.js" src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div class="bg-contact3" style="background-image: url('images/bg-01.png');">
<div class="container-contact3">
<div class="wrap-contact3">
<form class="form_principal" method="post">
<span class="contact3-form-title">
Parabéns pela Excelente Contratação
</span>
<span class="contact3-form">
Cadastramento de Unidades Consumidoras
</span>
<div class="wrap-input3 validate-input" data-validate="Nome é obrigatório">
<input class="input3" type="text" name="name" required autofocus placeholder="Seu Nome">
<span class="focus-input3"></span>
</div>
<div class="wrap-input3 validate-input" data-validate="Email valido é requerido: [email protected]">
<input class="input3" type="text" name="email" required placeholder="Seu Email">
<span class="focus-input3"></span>
</div>
<div class="wrap-input3 validate-input" data-validate="CNPJ é obrigatório">
<input type="text" id="cnpj" class="input3" maxlength="18" required placeholder="Digite o CNPJ do Contrante" onkeyup="mascara('##.###.###/####-##',this,event,true)">
<span class="focus-input3"></span>
</div>
<div class="wrap-input3 validate-input" data-validate="Razão Social é Obrigatório">
<input class="input3" type="text" name="razaosocial" placeholder="Razão Social">
<span class="focus-input3"></span>
</div>
<div>
<select class="selection-2" name="submercado">
<option value="" disabled selected>Selecione o Submercado</option>
<option>Nordeste</option>
<option>Norte</option>
<option>Sudeste/Centro-Oeste</option>
<option>Sul</option>
</select>
</div>
<span class="focus-input3"></span>
<script>
//Total máximo de campos que você permitirá criar em seu site:
var totalCampos = 50;
//Não altere os valores abaixo, pois são variáveis controle;
var iLoop = 1;
var iCount = 0;
var UnidadeAtual;
function AddCampos() {
var hidden1 = document.getElementById("hidden1");
var hidden2 = document.getElementById("hidden2");
//Executar apenas se houver possibilidade de inserção de novos campos:
if (iCount < totalCampos) {
//Limpar hidden1, para atualizar a lista dos campos que ainda estão vazios:
hidden2.value = "";
//Atualizando a lista dos campos que estão ocultos.
//Essa lista ficará armazenada temporiariamente em hidden2;
for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
if (document.getElementById("Unidade" + iLoop).style.display == "none") {
if (hidden2.value == "") {
hidden2.value = "Unidade" + iLoop;
} else {
hidden2.value += ",Unidade" + iLoop;
}
}
}
//Quebrando a lista que foi armazenada em hidden2 em array:
UnidadesOcultas = hidden2.value.split(",");
if (UnidadesOcultas.length > 0) {
//Tornar visível o primeiro elemento de UnidadesOcultas:
document.getElementById(UnidadesOcultas[0]).style.display = "block";
iCount++;
//Acrescentando o índice zero a hidden1:
if (hidden1.value == "") {
hidden1.value = UnidadesOcultas[0];
} else {
hidden1.value += "," + UnidadesOcultas[0];
}
/*Retirar a opção acima da lista de itens ocultos: <-------- OPCIONAL!!!*/
if (hidden2.value.indexOf("," + UnidadesOcultas[0]) != -1) {
hidden2.value = hidden2.value.replace(UnidadesOcultas[0] + ",", "");
} else if (hidden2.indexOf(UnidadesOcultas[0] + ",") == 0) {
hidden2.value = hidden2.value.replace(UnidadesOcultas[0] + ",", "");
} else {
hidden2.value = "";
}
}
}
}
function RemoverCampos(id) {
//Criando ponteiro para hidden1:
var hidden1 = document.getElementById("hidden1");
//Pegar o valor do campo que será excluído:
var campoValor = document.getElementById("nome_unidade" + id).value;
//Se o campo não tiver nenhum valor, atribuir a string: vazio:
if (campoValor == "") {
campoValor = "vazio";
}
if (confirm("A Unidade Consumidora:\n» " + campoValor + "\nserá excluído!\n\nDeseja prosseguir?")) {
document.getElementById("Unidade" + id).style.display = "none";
iCount--;
//Removendo o valor de hidden1:
if (hidden1.value.indexOf(",Unidade" + id) != -1) {
hidden1.value = hidden1.value.replace(",Unidade" + id, "");
} else if (hidden1.value.indexOf("Unidade" + id + ",") == 0) {
hidden1.value = hidden1.value.replace("Unidade" + id + ",", "");
} else {
hidden1.value = "";
}
}
}
$(document).ready(function() {
$('span[id^=Unidade] input').on("input");
});
//Escrevendo o código-fonte HTML e ocultando os campos criados:
for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
document.write(
"<span class='input3' id='Unidade" + iLoop + "' style='display:none'><div class='wrap-input3 validate-input'>" + iLoop + ":<input class='input3' type='text' placeholder='Nome da Unidade Consumidora' required name='nome_unidade" + iLoop + "' id='nome_unidade" + iLoop + "'/></div><div class='wrap-input3 validate-input'><input class='input3' type='text' placeholder='Digite o CNPJ' maxlength='18' required name='CNPJ" + iLoop + "' id='CNPJ" + iLoop + "' onkeyup='mascara('##.###.###/####-##',this,event,true)'/></div><div class='wrap-input3 validate-input'><input class='input3' type='text' placeholder='Digite a Inscrição Estadual' name='IE" + iLoop + "' id='IE" + iLoop + "' /></div> <input type='button' class='btn-remove-campos' value='Remover' onclick='RemoverCampos(\"" + iLoop + "\")'></span>");
}
</script>
<form name="form_unidadeconsumidora" action="" method="post">
<br><br><br>
<input class="btn-add-campos" type="button" value="Adicionar Unidade Consumidora" onclick="AddCampos()">
<br><br><input type="hidden" name="hidden1" id="hidden1">
<input type="hidden" name="hidden2" id="hidden2">
</form>
<div class="container-contact3-form-btn">
<button class="contact3-form-btn">
Enviar
</button>
</div>
</form>
</div>
</div>
</div>
<!--===============================================================================================-->
<div id="dropDownSelect1"></div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<script>
$(".selection-2").select2({
minimumResultsForSearch: 20,
dropdownParent: $('#dropDownSelect1')
});
</script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-23581568-13"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-23581568-13');
</script>
</body>
</html>I’m trying to apply a mask to a dynamic field that can be dynamically added or removed. I’m not getting the mask, I just don’t apply it. The code snippet that I use to apply it to the dynamic field is:
for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
document.write(
"<span class='input3' id='Unidade" + iLoop + "' style='display:none'><div class='wrap-input3 validate-input'>" + iLoop + ":<input class='input3' type='text' placeholder='Nome da Unidade Consumidora' required name='nome_unidade" + iLoop + "' id='nome_unidade" + iLoop + "'/></div><div class='wrap-input3 validate-input'><input class='input3' type='text' placeholder='Digite o CNPJ' maxlength='18' required name='CNPJ" + iLoop + "' id='CNPJ" + iLoop + "' onkeyup='mascara('##.###.###/####-##',this,event,true)'/></div><div class='wrap-input3 validate-input'><input class='input3' type='text' placeholder='Digite a Inscrição Estadual' name='IE" + iLoop + "' id='IE" + iLoop + "' /></div> <input type='button' class='btn-remove-campos' value='Remover' onclick='RemoverCampos(\"" + iLoop + "\")'></span>");
In the static field the mask works perfectly. Follow the code section, where I apply the mask to the static field:
<div class="wrap-input3 validate-input" data-validate="CNPJ é obrigatório">
<input type="text" id="cnpj" class="input3" maxlength="18" required placeholder="Digite o CNPJ do Contrante" onkeyup="mascara('##.###.###/####-##',this,event,true)">
<span class="focus-input3"></span>
</div>
Could someone help me apply the mask in the dynamic field ?
Then, editing the code I realized when it is executed that the <div> generated in the dynamic field generates this result : <input class="input3" type="text" placeholder="Type the CNPJ" maxlength="18" required="name="CNPJ2" id="CNPJ2" onkeyup="mascara(##.###.####/####-##,this,Event,true)"> You notice that in the onkeyup="mascara field(##.###.#####/#####-#,this,Event,true)", a single quotation is missing from the ##parameter. ###. ###/####-##, but I can’t add these quotes in the dynamic field, only in the static field. I’m looking for a solution to this.
– Matheus Cardoso
I found a solution using jquery, but still encounter difficulties <script> jQuery(Function($){ var Count = 1; for (Count=1; Count<=totalfields; Count++) "CNPJ"+Count; $("#CNPJ").Mask("99.999.999/9999-99"); }); </script>
– Matheus Cardoso