Fórum OpenCart Brasil

Por um e-commerce livre, confiável e profissional

Máscara dos campos não funciona

Suporte geral sobre problemas técnicos para OpenCart v2.x.
 Responder

Máscara dos campos não funciona

Por Marcelo Fernandes
Mensagens
-  17 Jan 2017, 09:58 #71817
Bom dia pessoal,

Já estou a um bom tempo tentando acertar o campo de máscara(CPF, Telefone, CEP) para os cadastros de clientes e não está dando certo. Eu encontrei um módulo que faz a máscara do Telefone e do CEP, até aí OK. Decidi então digitar o código do CPF na mão me baseando nos outros dois que já estão funcionando, porém sempre que eu digito o código do CPF os outros dois param de funcionar, sendo que eu nem altero eles. Alguém poderia me dar uma dica ou ver onde eu estou errando no código? Porque já não sei o que fazer para acertar isso.

Abaixo está o código do XML que faz a instalação do módulo. Estou usando a versão 2.1.0.2 do OC e o tema é da PAV, só que até eu adicionar o código do CPF a mascara do CEP e Telefone funcionam certinho, somente depois que adiciono o código que elas param.

Código Completo
Código: Selecionar todos
<?xml version="1.0" encoding="UTF-8"?>
<modification>
	
	<!-- BUSCA CEP -->
	<file path="catalog/model/localisation/zone.php">
		<operation>
			<search>
				<![CDATA[public function getZone($zone_id) {]]>
			</search>
			<add position="before">
				<![CDATA[
					public function getZonesByEstado($estado) {
						if(strlen($estado) <= 2){
							$query = $this->db->query("SELECT zone_id FROM " . DB_PREFIX . "zone WHERE country_id = '30' AND code = '".$estado."' AND status = '1' ORDER BY name");
							$zone_id = $query->row['zone_id'];
						}else{
							$zone_id = '';
						}
						return $zone_id;
					}
				]]>
			</add>
		</operation> 
	</file>
	
	<file path="catalog/controller/account/register.php">
		<operation>
			<search>
				<![CDATA[public function customfield() {]]>
			</search>
			<add position="before">
				<![CDATA[
					public function estado_autocompletar() {
						$this->load->model('localisation/zone');
						$code = $this->model_localisation_zone->getZonesByEstado($this->request->get['estado']);
						if ($code != '') {
							$output = $code;
						}else{
							$output = '';
						}
						$this->response->setOutput($output);
					}
				]]>
			</add>
		</operation> 
	</file>
	
	<file path="catalog/view/theme/*/template/account/{register,address_form}.tpl|catalog/view/theme/*/template/affiliate/{register,edit}.tpl">
		<operation>
			<search>
				<![CDATA[<?php echo $footer; ?>]]>
			</search>
			<add position="before">
				<![CDATA[
					<script type="text/javascript">
						$(function(){
							$('#input-postcode').blur(function(){
								var cep = $.trim($('#input-postcode').val().replace('-', ''));
				
								$.getJSON("https://api.postmon.com.br/v1/cep/"+cep, function(data){
									var resultadoCEP = data;
									if(resultadoCEP["logradouro"] != "" && resultadoCEP["logradouro"] != undefined || resultadoCEP["endereco"] != ""){
										$('#input-address-1').val(unescape(resultadoCEP["logradouro"] || resultadoCEP["endereco"]));
										$('#input-address-2').val(unescape(resultadoCEP["bairro"]));
										$('#input-city').val(unescape(resultadoCEP["cidade"]));

										$('#input-country').find('option[value="30"]').attr('selected', true);
										$.post('index.php?route=account/register/estado_autocompletar&estado=' + unescape(resultadoCEP['estado']), function(zone_id){
											$.ajax({
												url: 'index.php?route=account/account/country&country_id=30',
												dataType: 'json',
												success: function(json) {
													if (json['postcode_required'] == '1') {
														$('input[name=\'postcode\']').parent().parent().addClass('required');
													} else {
														$('input[name=\'postcode\']').parent().parent().removeClass('required');
													}
			
													var html = '<option value=""><?php echo $text_select; ?></option>';
			
													if (json['zone'] != '') {
														for (i = 0; i < json['zone'].length; i++) {
															html += '<option value="' + json['zone'][i]['zone_id'] + '"';
															
															if (json['zone'][i]['zone_id'] == zone_id) {
																html += ' selected="selected"';
															}
											
															html += '>' + json['zone'][i]['name'] + '</option>';
														}
													} else {
														html += '<option value="0" selected="selected"><?php echo $text_none; ?></option>';
													}
			
													$('#input-zone').html(html);
												}
											});
										});
									}
								});
							});
						});	
					</script>
				]]>
			</add>
		</operation>
		
		<operation>
			<search>
				<![CDATA[<label class="col-sm-2 control-label" for="input-postcode"><?php echo $entry_postcode; ?></label>]]>
			</search>
			<add position="before" offset="1">
				<![CDATA[<!-- ]]>
			</add>
		</operation>
		<operation>
			<search>
				<![CDATA[<label class="col-sm-2 control-label" for="input-country"><?php echo $entry_country; ?></label>]]>
			</search>
			<add position="before" offset="1">
				<![CDATA[ -->]]>
			</add>
		</operation>
		<operation>
			<search>
				<![CDATA[<label class="col-sm-2 control-label" for="input-address-1"><?php echo $entry_address_1; ?></label>]]>
			</search>
			<add position="before" offset="1">
				<![CDATA[
					<div class="form-group required">
						<label class="col-sm-2 control-label" for="input-postcode"><?php echo $entry_postcode; ?></label>
						<div class="col-sm-10">
						  <input type="text" name="postcode" value="<?php echo $postcode; ?>" placeholder="<?php echo $entry_postcode; ?>" id="input-postcode" class="form-control" />
						  <?php if ($error_postcode) { ?>
						  <div class="text-danger"><?php echo $error_postcode; ?></div>
						  <?php } ?>
						</div>
					</div>
				]]>
			</add>
		</operation>
	</file>
	
	<file path="catalog/view/theme/*/template/checkout/{register,guest}.tpl">
		<operation>
			<search>
				<![CDATA[$('#collapse-payment-address select[name=\'country_id\']').trigger('change');]]>
			</search>
			<add position="after" offset="1">
				<![CDATA[
					<script type="text/javascript">
						$(function(){
							$('#input-payment-postcode').blur(function(){
								var cep = $.trim($('#input-payment-postcode').val().replace('-', ''));
				
								$.getJSON("https://api.postmon.com.br/v1/cep/"+cep, function(data){
									var resultadoCEP = data;
									if(resultadoCEP["logradouro"] != "" && resultadoCEP["logradouro"] != undefined || resultadoCEP["endereco"] != ""){
										$('#input-payment-address-1').val(unescape(resultadoCEP["logradouro"] || resultadoCEP["endereco"]));
										$('#input-payment-address-2').val(unescape(resultadoCEP["bairro"]));
										$('#input-payment-city').val(unescape(resultadoCEP["cidade"]));

										$('#input-payment-country').find('option[value="30"]').attr('selected', true);
										$.post('index.php?route=account/register/estado_autocompletar&estado=' + unescape(resultadoCEP['estado']), function(zone_id){
											$.ajax({
												url: 'index.php?route=account/account/country&country_id=30',
												dataType: 'json',
												success: function(json) {
													if (json['postcode_required'] == '1') {
														$('#collapse-payment-address input[name=\'postcode\']').parent().parent().addClass('required');
													} else {
														$('#collapse-payment-address input[name=\'postcode\']').parent().parent().removeClass('required');
													}
			
													var html = '<option value=""><?php echo $text_select; ?></option>';
			
													if (json['zone'] != '') {
														for (i = 0; i < json['zone'].length; i++) {
															html += '<option value="' + json['zone'][i]['zone_id'] + '"';
															
															if (json['zone'][i]['zone_id'] == zone_id) {
																html += ' selected="selected"';
															}
											
															html += '>' + json['zone'][i]['name'] + '</option>';
														}
													} else {
														html += '<option value="0" selected="selected"><?php echo $text_none; ?></option>';
													}
			
													$('#input-payment-zone').html(html);
												}
											});
										});
									}
								});
							});
						});	
					</script>
				]]>
			</add>
		</operation>

		<operation>
			<search>
				<![CDATA[<label class="control-label" for="input-payment-postcode"><?php echo $entry_postcode; ?></label>]]>
			</search>
			<add position="before" offset="1">
				<![CDATA[<!-- ]]>
			</add>
		</operation>
		<operation>
			<search>
				<![CDATA[<label class="control-label" for="input-payment-country"><?php echo $entry_country; ?></label>]]>
			</search>
			<add position="before" offset="1">
				<![CDATA[ -->]]>
			</add>
		</operation>
		<operation>
			<search>
				<![CDATA[<label class="control-label" for="input-payment-address-1"><?php echo $entry_address_1; ?></label>]]>
			</search>
			<add position="before" offset="1">
				<![CDATA[
					<div class="form-group required">
						<label class="control-label" for="input-payment-postcode"><?php echo $entry_postcode; ?></label>
						<input type="text" name="postcode" value="<?php echo $postcode; ?>" placeholder="<?php echo $entry_postcode; ?>" id="input-payment-postcode" class="form-control" />
					</div>
				]]>
			</add>
		</operation>
	</file>
	
	<file path="catalog/view/theme/*/template/checkout/{guest_shipping,shipping_address}.tpl">
		<operation>
			<search>
				<![CDATA[$('#collapse-shipping-address select[name=\'country_id\']').trigger('change');]]>
			</search>
			<add position="after" offset="1">
				<![CDATA[
					<script type="text/javascript">
						$(function(){
							$('#input-shipping-postcode').blur(function(){
								var cep = $.trim($('#input-shipping-postcode').val().replace('-', ''));
				
								$.getJSON("https://api.postmon.com.br/v1/cep/"+cep, function(data){
									var resultadoCEP = data;
									if(resultadoCEP["logradouro"] != "" && resultadoCEP["logradouro"] != undefined || resultadoCEP["endereco"] != ""){
										$('#input-shipping-address-1').val(unescape(resultadoCEP["logradouro"] || resultadoCEP["endereco"]));
										$('#input-shipping-address-2').val(unescape(resultadoCEP["bairro"]));
										$('#input-shipping-city').val(unescape(resultadoCEP["cidade"]));

										$('#input-shipping-country').find('option[value="30"]').attr('selected', true);
										$.post('index.php?route=account/register/estado_autocompletar&estado=' + unescape(resultadoCEP['estado']), function(zone_id){
											$.ajax({
												url: 'index.php?route=account/account/country&country_id=30',
												dataType: 'json',
												success: function(json) {
													if (json['postcode_required'] == '1') {
														$('#collapse-shipping-address input[name=\'postcode\']').parent().parent().addClass('required');
													} else {
														$('#collapse-shipping-address input[name=\'postcode\']').parent().parent().removeClass('required');
													}
			
													var html = '<option value=""><?php echo $text_select; ?></option>';
			
													if (json['zone'] != '') {
														for (i = 0; i < json['zone'].length; i++) {
															html += '<option value="' + json['zone'][i]['zone_id'] + '"';
															
															if (json['zone'][i]['zone_id'] == zone_id) {
																html += ' selected="selected"';
															}
											
															html += '>' + json['zone'][i]['name'] + '</option>';
														}
													} else {
														html += '<option value="0" selected="selected"><?php echo $text_none; ?></option>';
													}
			
													$('#input-shipping-zone').html(html);
												}
											});
										});
									}
								});
							});
						});	
					</script>
				]]>
			</add>
		</operation>

		<operation>
			<search>
				<![CDATA[<label class="col-sm-2 control-label" for="input-shipping-postcode"><?php echo $entry_postcode; ?></label>]]>
			</search>
			<add position="before" offset="1">
				<![CDATA[<!-- ]]>
			</add>
		</operation>
		<operation>
			<search>
				<![CDATA[<label class="col-sm-2 control-label" for="input-shipping-country"><?php echo $entry_country; ?></label>]]>
			</search>
			<add position="before" offset="1">
				<![CDATA[ -->]]>
			</add>
		</operation>
		<operation>
			<search>
				<![CDATA[<label class="col-sm-2 control-label" for="input-shipping-address-1"><?php echo $entry_address_1; ?></label>]]>
			</search>
			<add position="before" offset="1">
				<![CDATA[
					<div class="form-group required">
					  <label class="col-sm-2 control-label" for="input-shipping-postcode"><?php echo $entry_postcode; ?></label>
					  <div class="col-sm-10">
						<input type="text" name="postcode" value="<?php echo $postcode; ?>" placeholder="<?php echo $entry_postcode; ?>" id="input-shipping-postcode" class="form-control" />
					  </div>
					</div>
				]]>
			</add>
		</operation>
	</file>
	
	<file path="catalog/view/theme/*/template/checkout/payment_address.tpl">
		<operation>
			<search>
				<![CDATA[$('#collapse-payment-address select[name=\'country_id\']').trigger('change');]]>
			</search>
			<add position="after" offset="1">
				<![CDATA[
					<script type="text/javascript">
						$(function(){
							$('#input-payment-postcode').blur(function(){
								var cep = $.trim($('#input-payment-postcode').val().replace('-', ''));
				
								$.getJSON("https://api.postmon.com.br/v1/cep/"+cep, function(data){
									var resultadoCEP = data;
									if(resultadoCEP["logradouro"] != "" && resultadoCEP["logradouro"] != undefined || resultadoCEP["endereco"] != ""){
										$('#input-payment-address-1').val(unescape(resultadoCEP["logradouro"] || resultadoCEP["endereco"]));
										$('#input-payment-address-2').val(unescape(resultadoCEP["bairro"]));
										$('#input-payment-city').val(unescape(resultadoCEP["cidade"]));

										$('#input-payment-country').find('option[value="30"]').attr('selected', true);
										$.post('index.php?route=account/register/estado_autocompletar&estado=' + unescape(resultadoCEP['estado']), function(zone_id){
											$.ajax({
												url: 'index.php?route=account/account/country&country_id=30',
												dataType: 'json',
												success: function(json) {
													if (json['postcode_required'] == '1') {
														$('#collapse-payment-address input[name=\'postcode\']').parent().parent().addClass('required');
													} else {
														$('#collapse-payment-address input[name=\'postcode\']').parent().parent().removeClass('required');
													}
			
													var html = '<option value=""><?php echo $text_select; ?></option>';
			
													if (json['zone'] != '') {
														for (i = 0; i < json['zone'].length; i++) {
															html += '<option value="' + json['zone'][i]['zone_id'] + '"';
															
															if (json['zone'][i]['zone_id'] == zone_id) {
																html += ' selected="selected"';
															}
											
															html += '>' + json['zone'][i]['name'] + '</option>';
														}
													} else {
														html += '<option value="0" selected="selected"><?php echo $text_none; ?></option>';
													}
			
													$('#input-payment-zone').html(html);
												}
											});
										});
									}
								});
							});
						});	
					</script>
				]]>
			</add>
		</operation>

		<operation>
			<search>
				<![CDATA[<label class="col-sm-2 control-label" for="input-payment-postcode"><?php echo $entry_postcode; ?></label>]]>
			</search>
			<add position="before" offset="1">
				<![CDATA[<!-- ]]>
			</add>
		</operation>
		<operation>
			<search>
				<![CDATA[<label class="col-sm-2 control-label" for="input-payment-country"><?php echo $entry_country; ?></label>]]>
			</search>
			<add position="before" offset="1">
				<![CDATA[ -->]]>
			</add>
		</operation>
		<operation>
			<search>
				<![CDATA[<label class="col-sm-2 control-label" for="input-payment-address-1"><?php echo $entry_address_1; ?></label>]]>
			</search>
			<add position="before" offset="1">
				<![CDATA[
					<div class="form-group required">
					  <label class="col-sm-2 control-label" for="input-payment-postcode"><?php echo $entry_postcode; ?></label>
					  <div class="col-sm-10">
						<input type="text" name="postcode" value="" placeholder="<?php echo $entry_postcode; ?>" id="input-payment-postcode" class="form-control" />
					  </div>
					</div>
				]]>
			</add>
		</operation>
	</file>
	<!-- FIM DA BUSCA CEP -->
	
	<file path="catalog/view/theme/*/template/common/footer.tpl">
		<operation info="">
			<search>
				<![CDATA[
					</footer>
				]]>
			</search>
			<add position="after">
				<![CDATA[
					
					<script type="text/javascript" src="catalog/view/javascript/jquery.mask.min.js"></script>

					<script type="text/javascript">
						$(function() {
							mascaras();
						});
						
						function mascaras(){
							var masksTel = ['(AA) A0000-0000', '(AA) A000-00009'],
							maskBehaviorTel = function(val, e, field, options) {
								return val.length > 14 ? masksTel[0] : masksTel[1];
							};

							$('input[name="telephone"], input[name="fax"]').mask(maskBehaviorTel, {onKeyPress: 
							   function(val, e, field, options) {
								   field.mask(maskBehaviorTel(val, e, field, options), {'translation': {'A': {pattern: /[1-9*]/}}});
							   }
							});
							
							var masksDoc = ['00.000.000/0000-00', '000.000.000-009999'],
							maskBehaviorDoc = function(val, e, field, options) {
								return val.replace(/\D/g, '').length > 11 ? masksDoc[0] : masksDoc[1];
							};
							
							$('input[name="tax_id"]').mask(maskBehaviorDoc, {onKeyPress: 
							   function(val, e, field, options) {
								   field.mask(maskBehaviorDoc(val, e, field, options), options);
							   }
							});
							
							var masksCpf = ['000.000.000-00'],
							maskBehaviorCpf = function(val, e, field, options) {
								return val.replace(/\D/g, '').length > 14 ? masksCpf[0];
							};
							
							$('input[name="custom_field[account][1]"]').mask(maskBehaviorDoc, {onKeyPress: 
							   function(val, e, field, options) {
								   field.mask(maskBehaviorCpf(val, e, field, options), options);
							   }
							});
							
							$('input[name="postcode"]').mask('00000-000');
							
						}
						});
					</script>
									
				]]>
			</add>
		</operation>
	</file>
		
	<file path="catalog/view/theme/*/template/checkout/checkout.tpl">
		<operation info="">
			<search>
				<![CDATA[
					$(document).delegate('#button-account', 'click', function() {
				]]>
			</search>
			<add position="replace" offset="9">
				<![CDATA[
					$(document).delegate('#button-account', 'click', function() {
						$.ajax({
							url: 'index.php?route=checkout/' + $('input[name=\'account\']:checked').val(),
							dataType: 'html',
							complete: function() {
								$('#button-account').button('reset');
								mascaras();
							},
				]]>
			</add>
		</operation>
		<operation info="">
			<search>
				<![CDATA[
					$('#collapse-payment-address .panel-body').html(html);
				]]>
			</search>
			<add position="after">
				<![CDATA[
					mascaras();
				]]>
			</add>
		</operation>
		<operation info="">
			<search>
				<![CDATA[
					$('#collapse-shipping-address .panel-body').html(html);
				]]>
			</search>
			<add position="after">
				<![CDATA[
					mascaras();
				]]>
			</add>
		</operation>
	</file>
	
	<!-- FIM DA MASCARA TELEFONE+CEP -->	
	
	<file path="catalog/controller/{account,checkout}/{register,address,guest,guest_shipping,payment_address,shipping_address}.php">
		<operation info="">
			<search>
				<![CDATA[
					if ($country_info && $country_info['postcode_required'] && (utf8_strlen(trim($this->request->post['postcode'])) < 2 || utf8_strlen(trim($this->request->post['postcode'])) > 10)) {
				]]>
			</search>
			<add position="replace">
				<![CDATA[
					if ($country_info && $country_info['postcode_required'] && (utf8_strlen(trim($this->request->post['postcode'])) < 9 || utf8_strlen(trim($this->request->post['postcode'])) > 10)) {
				]]>
			</add>
		</operation>
	</file>
	<file path="catalog/controller/affiliate/{register,edit}.php">
		<operation info="">
			<search>
				<![CDATA[
					if ($country_info && $country_info['postcode_required'] && (utf8_strlen(trim($this->request->post['postcode'])) < 2 || utf8_strlen(trim($this->request->post['postcode'])) > 10)) {
				]]>
			</search>
			<add position="replace">
				<![CDATA[
					if ($country_info && $country_info['postcode_required'] && (utf8_strlen(trim($this->request->post['postcode'])) < 9 || utf8_strlen(trim($this->request->post['postcode'])) > 10)) {
				]]>
			</add>
		</operation>
	</file>
	
</modification>
Código somente das máscaras
Código: Selecionar todos
<file path="catalog/view/theme/*/template/common/footer.tpl">
		<operation info="">
			<search>
				<![CDATA[
					</footer>
				]]>
			</search>
			<add position="after">
				<![CDATA[
					
					<script type="text/javascript" src="catalog/view/javascript/jquery.mask.min.js"></script>

					<script type="text/javascript">
						$(function() {
							mascaras();
						});
						
						function mascaras(){
							var masksTel = ['(AA) A0000-0000', '(AA) A000-00009'],
							maskBehaviorTel = function(val, e, field, options) {
								return val.length > 14 ? masksTel[0] : masksTel[1];
							};

							$('input[name="telephone"], input[name="fax"]').mask(maskBehaviorTel, {onKeyPress: 
							   function(val, e, field, options) {
								   field.mask(maskBehaviorTel(val, e, field, options), {'translation': {'A': {pattern: /[1-9*]/}}});
							   }
							});
							
							var masksDoc = ['00.000.000/0000-00', '000.000.000-009999'],
							maskBehaviorDoc = function(val, e, field, options) {
								return val.replace(/\D/g, '').length > 11 ? masksDoc[0] : masksDoc[1];
							};
							
							$('input[name="tax_id"]').mask(maskBehaviorDoc, {onKeyPress: 
							   function(val, e, field, options) {
								   field.mask(maskBehaviorDoc(val, e, field, options), options);
							   }
							});
							
							var masksCpf = ['000.000.000-00'],
							maskBehaviorCpf = function(val, e, field, options) {
								return val.replace(/\D/g, '').length > 14 ? masksCpf[0];
							};
							
							$('input[name="custom_field[account][1]"]').mask(maskBehaviorDoc, {onKeyPress: 
							   function(val, e, field, options) {
								   field.mask(maskBehaviorCpf(val, e, field, options), options);
							   }
							});
							
							$('input[name="postcode"]').mask('00000-000');
							
						}
						});
					</script>
									
				]]>
			</add>
		</operation>
	</file>
		
	<file path="catalog/view/theme/*/template/checkout/checkout.tpl">
		<operation info="">
			<search>
				<![CDATA[
					$(document).delegate('#button-account', 'click', function() {
				]]>
			</search>
			<add position="replace" offset="9">
				<![CDATA[
					$(document).delegate('#button-account', 'click', function() {
						$.ajax({
							url: 'index.php?route=checkout/' + $('input[name=\'account\']:checked').val(),
							dataType: 'html',
							complete: function() {
								$('#button-account').button('reset');
								mascaras();
							},
				]]>
			</add>
		</operation>
		<operation info="">
			<search>
				<![CDATA[
					$('#collapse-payment-address .panel-body').html(html);
				]]>
			</search>
			<add position="after">
				<![CDATA[
					mascaras();
				]]>
			</add>
		</operation>
		<operation info="">
			<search>
				<![CDATA[
					$('#collapse-shipping-address .panel-body').html(html);
				]]>
			</search>
			<add position="after">
				<![CDATA[
					mascaras();
				]]>
			</add>
		</operation>
	</file>
	
	<!-- FIM DA MASCARA TELEFONE+CEP -->
Avatar do usuário

Re: Máscara dos campos não funciona

Por valdeir2000
Mensagens Especiais
-  17 Jan 2017, 20:28 #71835
Qual o link de sua loja??

Tenta isso.
Substituir $('input[name="custom_field[account][1]"]').mask(maskBehaviorDoc, {onKeyPress: por
$('input[name="custom_field[account][ALTERAR_PELO_ID_DO_CAMPO]"]').mask(maskBehaviorDoc, {onKeyPress:
 Responder
 Voltar para “Suporte Geral”
Superlative Сasual Dating - Authentic Ladies

Night games. One night, no worries Real Women P[…]

LEIA MAIS
[Resolvido] Google Avaliações do Consumidor

@Manoel Vidal Poderia me ajudar com 2 coisas n[…]

LEIA MAIS
Finest Сasual Dating - Authentic Damsels

Looking for a partner for an unforgettable night? […]

LEIA MAIS
Notice: Error: Password not accepted from server

Vou verificar, Obrigado

LEIA MAIS
VER MAIS TÓPICOS