jQuery para Consulta AJAX do CEP nos Correios com preenchimento automático dos campos do formulário.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

jQuery CEP Correios

Utilize o jQuery da WebmaniaBR® para consultas Ajax nos Correios com preenchimento automático do formulário.

Documentação: https://webmaniabr.com/docs/rest-api-correios/

Requisitos

Obtenha as credenciais de acesso grátis e de uso ilimitado da sua aplicação. Acesse: https://webmaniabr.com/docs/rest-api-correios/#autenticacao

Utilização

Primeiro, adicione o jQuery e o javascript dos Correios antes da tag </body>:

<script src="jquery.js"></script>
<script src="jquery.correios.min.js"></script>

Em seguida, inicie o javascript informando as suas credenciais de acesso e os campos do formulário para o preenchimento automático:

jQuery(function($){
    correios.init( 'app_key', 'app_secret' );
    $('cep').correios( 'endereco', 'bairro', 'cidade', 'uf', 'loading', true, 'numero');
});
  • app_key: Informe o app_key da sua aplicação dos Correios.
  • app_secret: Informe o app_secret da sua aplicação dos Correios.
  • cep: Informe a classe ou id do input CEP. Exemplo: '#cep'
  • endereco: Informe a classe ou id do input Endereço. Exemplo: '#endereco'
  • bairro: Informe a classe ou id do input Bairro. Exemplo: '#bairro'
  • cidade: Informe a classe ou id do input Cidade. Exemplo: '#cidade'
  • uf: Informe a classe ou id do input Estado. Exemplo: '#uf'
  • loading: Informe a classe ou id da Imagem. Exemplo: '#loading'
  • readonly: Realiza o bloqueio dos campos Endereço, Bairro, Cidade e Estado impedindo que o usuário altere as informações preenchidas automaticamente. Deve ser informado o valor boolean (true ou false). Exemplo: true
  • numero: Informe a classe ou id do input Número para receber o foco após a consulta. Exemplo: '#numero'

CSS

Caso utilize a opção readonly, sugerimos adicionar a seguinte CSS para que o usuário identifique os campos bloqueados no Desktop e Smartphone:

input[readonly], input[readyonly=readonly], select[readonly], select[readonly=readonly] { background: #efefef !important; color: #666666 !important; border-color:#dfdcde !important; cursor:not-allowed; }
select[readonly], select[readonly=readonly] { pointer-events: none; touch-action: none; }