Código do Dia

DISPARAR AÇÃO APÓS TECLAR ENTER DENTRO DE IMPUT COM JQUERY

Segue o exemplo:

NO HTML
<input id="elementoInput" placeholder="Clique aqui e tecle enter" type="text" />

NO JAVASCRIPT


jQuery('#elementoInput').keypress(function(event){

 var keycode = (event.keyCode ? event.keyCode : event.which);
 if(keycode == '13'){
  ////adiciona aqui a ação a ser executada após teclar enter.
 }

});

quinta-feira, 12 de março de 2020

PEGAR POSIÇÃO DO ELEMENTO FILHO COM MÉTODO INDEX() JQUERY

Precisei criar 3 abas que ao clicar em uma aba, exibi um conteúdo ligado ao título da aba clicada e da um hide nos demais conteúdos, ao clicar na segunda aba, exibe o conteúdo ligado a segunda aba e da hide na que tava aberta, e assim sucessivamente. Para saber qual conteúdo exibir quando clicava na aba, precisei pegar a posição da aba clicada que era igual a posição do conteúdo desta aba clicada.
Então conheci o método index() do jquery, que pega a posição do elemento filho de um determinado elemento pai.

Veja o código e o exemplo prático para entender melhor.

No HTML:
<ul class="aba">
<li style="cursor:pointer;">Aba 1</li>
<li style="cursor:pointer">Aba 2</li>
<li style="cursor:pointer">Aba 3</li>
</ul>
<div class="conteudo">
<div style="display: none;"><b>Exibir Conteúdo da Aba 1</b></div>
<div style="display: none;"><b>Exibir Conteúdo da Aba 2</b></div>
<div style="display: none;"><b>Exibir Conteúdo da Aba 3</b></div>
</div>

NO JAVASCRIPT:

        
  $("ul.aba li").click(function(){
       var index = $(this).index();
        $("ul.aba li").css("color","black")
        $(this).css("color","blue")
       $("div.conteudo").children().hide()
       $("div.conteudo").children().eq(index).show() 
  })

Veja o exemplo na prático abaixo clicando nas abas para que aparece o seu conteúdo.

Aba 1
Aba 2
Aba 3

Se este conteúdo te ajudou ou está com dúvida em algo relacionado a este assunto, por favor deixe seu comentário. Forte abraço!

segunda-feira, 9 de março de 2020

TABELA DE CODIFICAÇÃO PARA TEXTOS COM CARACTERES ESPECIAIS QUE SÃO EXIBIDOS PELO JAVASCRIPT

Exemplo de implementação da tabela substituindo os caracteres especiais do texto pelo código acima que forma a letra desejada para que seja exibido pelo javascript.

NO JAVASCRIPT

alert("Precisei desta informa\xE7\xE3o");

Vai ser exibido no browser "Precisei desta informação"

Obs.: É necessário iniciar o código que vai representar a letra com \x

Obs.: Os zeros da primeira coluna da tabela é desconsiderada na formação da sequência do código;

sexta-feira, 6 de março de 2020

PEGAR CONTEÚDO DO IFRAME COM MÉTODO CONTENTS() JQUERY DO JAVASCRIPT

Muito simples, graças ao método jquery contents().
$('#iframe').contents().find('#elementoQueProcuraDentroIframe').html();

quinta-feira, 5 de março de 2020

PASSAR VALOR STRING PARA FUNÇÃO JAVASCRIPT A PARTIR DE UMA CHAMADA QUE JÁ ESTÁ DENTRO DE UMA STRING

Estava precisando criar uma função em js a qual após um clique em um botão, o mesmo gerava e concatenava um input com um atributo onkeypress que chamava uma função javascript que passava um valor string.


$("table#grid tbody").append('<input onkeypress="MascaraGenerica(\'CPF\')" />');

Desta forma o navegador entenderá que existe aspas(') no valor que está sendo passado pela chamada da função javascript.

Também tive a necessidade de concatenar uma função javascript a uma string, através desta função passar uma string. Então fiz desta forma para o browser entender as aspas simples obrigatórias no javascript para quando está passando uma string.

JAVASCRIPT



for (var chave in array) {

  var clik = "'"+array[chave]+"'";//O PULO DO GATO

  $(".painel-imagem-conteudo .row:eq(1) .col-md-12 .form-group").append('<a onclick="mudarImagemGrandePainel('+clik+')">CLIQUE</a>');
}

quarta-feira, 9 de outubro de 2019

FUNÇÃO JAVASCRIPT COM JQUERY PARA MOSTRAR TOOLTIP

No javascript:

 function NaytechTooltipTitle(seletor,msg){
        if(!msg){msg=$(seletor).attr('title');} //// pega a mensagem do atributo title ou recebe a mensagem enviada na chamada da função
        $(seletor).attr('title','');/// depois de guardado acima o title, apaga a mensagem do mesmo somente na tag para não mostrar o tooltip padrão do html 
        $(seletor).each(function () { 
                if (msg) {
                    $('body').append("<style id='naytech-tooltip-css'>.naytech-tooltip{color: #fff;background:#1d1d1d;padding:10px;position:absolute;z-index:10000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;max-width: 50%;}</style>");
                    $('body').append("<div class='naytech-tooltip'>" + msg + "</div>");
                }
                // tip.show(); //Show tooltip
            }).mouseout(function (e) {
                $(".naytech-tooltip").remove();
                $("style#naytech-tooltip-css").remove();
                $(seletor).attr('title',msg);/// após tirar o mouse de cima da tag, põe-se a mensagem no title para não perder o mesmo
            }).mousemove(function (e) {
                tip = $(".naytech-tooltip");

                coord = 20;
                var mousex = e.pageX + coord; //Get X coodrinates


                var mousey = e.pageY + coord; //Get Y coordinates
                var tipWidth = tip.width(); //Find width of tooltip
                var tipHeight = tip.height(); //Find height of tooltip
                //Distance of element from the right edge of viewport
                var tipVisX = $(window).width() - (mousex + tipWidth);

                //Distance of element from the bottom of viewport
                var tipVisY = $(window).height() - (mousey + tipHeight);


                if (tipVisX < coord) { //If tooltip exceeds the X coordinate of viewport
                    mousex = e.pageX - tipWidth - coord;
                }
                if (tipVisY < coord) { //If tooltip exceeds the Y coordinate of viewport
                    mousey = e.pageY - tipHeight - coord;
                }

                tip.css({top: mousey, left: mousex});
            });
    }

No HTML:

<a onmouseover="NaytechTooltipTitle(this)" title="Mensagem que será exibida no tooltip">Passe o mouse em cima para exibir o tooltip com a mensagem que está no atributo title!</a>

quarta-feira, 21 de agosto de 2019

FORÇAR QUEBRA DE LINHA NO TEXTO HTML

max-width: Define a largura e tamanho da div e linha do texto.
word-wrap: Força a quebra de linha do texto;

Exemplo:
<div style="max-width: 130px; word-wrap: break-word;">
TEXTO GRANDE
</div>

quarta-feira, 17 de julho de 2019

A FORMA MAIS FÁCIL DE FAZER UPLOAD DE ARQUIVO COM JAVASCRITP AJAX JQUERY E PHP

No arquivo.php

  $nome_arquivo = $_FILES['file']['name'];
  $tmp_name = $_FILES['file']['tmp_name'];

            if (is_dir("c:/upload/arquivo")) {
             $upload = move_uploaded_file($tmp_name, "c:/upload/arquivo/$nome_arquivo");
                if ($upload == true) {
                    exit("UPLOAD REALIZADO COM SUCESSO");
                } else {
                    exit("ERRO AO FAZER UPLOAD");
                }
            }else{
              exit("DIRETÓRIO DE DESTINO NÃO ENCONTRADO");
            }

No arquivo.js

                            $(function () {
                                $("#form").submit(function (e) {
                                    e.preventDefault();
                                    uploadArquivo();
                                    })
                            })

                            function uploadArquivo() {
                                var data;
                                data = new FormData();
                                data.append('file', $("#form input[type='file']")[0].files[0]);///ENVIA APENAS UM ARQUIVO
                                $.ajax({
                                    url: "arquivo.php",
                                    data: data,
                                    type: "post",
                                    processData: false,
                                    contentType: false,
                                    success: function (resp) {
                                             alert(resp);

                                    }
                                })
                            }

No arquivo.html

<form id="form">
Escolha o arquivo:
<input name="arquivo" type="file" />
<button type="submit">Salvar</button>
</form>

quarta-feira, 12 de junho de 2019

MÁSCARA PARA CPF, CNPJ, CEP, TELEFONE, DATA, MOEDA, INTEIRO, FLOAT OU CPF/CNPJ NO MESMO CAMPO COM JAVASCRIPT E EXPRESSÃO REGULAR

No campo do formulário HTML que deseja mascará ficará assim:
<input type="text" onKeyPress="MascaraGenerica(this, 'CPF');" >Caso queira a máscara do CPF, CNPJ, CEP, TELEFONE, DATA, MOEDA, INTEIRO ou CPFCNPJ no mesmo campo, basta trocar no campo do formulário HTML que contém o atributo: onKeyPress="MascaraGenerica(this, 'CPF');" o nome 'CPF' pelo nome da outra máscara que desejar, lembrando de digitar o nome da máscara em caixa alta.

No javascript copie todo código abaixo:


function MascaraInteiro(num) {
    var er = /[^0-9]/;
    er.lastIndex = 0;
    var campo = num;
    if (er.test(campo.value)) {///verifica se é string, caso seja então apaga
        var texto = $(campo).val();
        $(campo).val(texto.substring(0, texto.length - 1));
        return false;
    } else {
        return true;
    }
}
function MascaraFloat(num) {
    var er = /[^0-9.,]/;
    er.lastIndex = 0;
    var campo = num;
    if (er.test(campo.value)) {///verifica se é string, caso seja então apaga
        var texto = $(campo).val();
        $(campo).val(texto.substring(0, texto.length - 1));
        return false;
    } else {
        return true;
    }
}
 //formata de forma generica os campos
function formataCampo(campo, Mascara) {
    var er = /[^0-9/ (),.-]/;
    er.lastIndex = 0;

    if (er.test(campo.value)) {///verifica se é string, caso seja então apaga
        var texto = $(campo).val();
        $(campo).val(texto.substring(0, texto.length - 1));
    }
    var boleanoMascara;
    var exp = /\-|\.|\/|\(|\)| /g
    var campoSoNumeros = campo.value.toString().replace(exp, "");
    var posicaoCampo = 0;
    var NovoValorCampo = "";
    var TamanhoMascara = campoSoNumeros.length;
    for (var i = 0; i <= TamanhoMascara; i++) {
        boleanoMascara = ((Mascara.charAt(i) == "-") || (Mascara.charAt(i) == ".")
                || (Mascara.charAt(i) == "/"))
        boleanoMascara = boleanoMascara || ((Mascara.charAt(i) == "(")
                || (Mascara.charAt(i) == ")") || (Mascara.charAt(i) == " "))
        if (boleanoMascara) {
            NovoValorCampo += Mascara.charAt(i);
            TamanhoMascara++;
        } else {
            NovoValorCampo += campoSoNumeros.charAt(posicaoCampo);
            posicaoCampo++;
        }
    }
    campo.value = NovoValorCampo;
    ////LIMITAR TAMANHO DE CARACTERES NO CAMPO DE ACORDO COM A MASCARA//
    if (campo.value.length > Mascara.length) {
        var texto = $(campo).val();
        $(campo).val(texto.substring(0, texto.length - 1));
    }
    //////////////
    return true;
}

function MascaraMoeda(i) {
    var v = i.value.replace(/\D/g, '');
    v = (v / 100).toFixed(2) + '';
    v = v.replace(".", ",");
    v = v.replace(/(\d)(\d{3})(\d{3}),/g, "$1.$2.$3,");
    v = v.replace(/(\d)(\d{3}),/g, "$1.$2,");
    i.value = v;
}

function MascaraGenerica(seletor, tipoMascara) {
    setTimeout(function () {
        if (tipoMascara == 'CPFCNPJ') {
            if (seletor.value.length <= 14) { //cpf
                formataCampo(seletor, '000.000.000-00');
            } else { //cnpj
                formataCampo(seletor, '00.000.000/0000-00');
            }
        } else if (tipoMascara == 'DATA') {
            formataCampo(seletor, '00/00/0000');
        } else if (tipoMascara == 'CEP') {
            formataCampo(seletor, '00.000-000');
        } else if (tipoMascara == 'TELEFONE') {
            formataCampo(seletor, '(00) 000000000');
        } else if (tipoMascara == 'INTEIRO') {
            MascaraInteiro(seletor);
        } else if (tipoMascara == 'FLOAT') {
            MascaraFloat(seletor);
        } else if (tipoMascara == 'CPF') {
            formataCampo(seletor, '000.000.000-00');
        } else if (tipoMascara == 'CNPJ') {
            formataCampo(seletor, '00.000.000/0000-00');
        } else if (tipoMascara == 'MOEDA') {
            MascaraMoeda(seletor);
        }
    }, 200);
}

terça-feira, 28 de maio de 2019

VALIDAR CNPJ, CPF, TELEFONE, CEP E DATA EM JAVASCRIPT COM EXPRESSÃO REGULAR

No campo CNPJ do formulário HTML ficará assim:
<input maxlength="18" name="cnpj" onblur="ValidarCNPJ(this);" type="text" /> No javascript:


//valida telefone
function ValidaTelefone(tel){
        exp = /\(\d{2}\)\ \d{4}\-\d{4}/
        if(!exp.test(tel.value))
                alert('Numero de Telefone Invalido!');
}

//valida CEP
function ValidaCep(cep){
        exp = /\d{2}\.\d{3}\-\d{3}/
        if(!exp.test(cep.value))
                alert('Numero de Cep Invalido!');               
}

//valida data
function ValidaData(data){
        exp = /\d{2}\/\d{2}\/\d{4}/
        if(!exp.test(data.value))
                alert('Data Invalida!');                        
}

//valida o CPF digitado
function ValidarCPF(Objcpf){
        var cpf = Objcpf.value;
        exp = /\.|\-/g
        cpf = cpf.toString().replace( exp, "" ); 
        var digitoDigitado = eval(cpf.charAt(9)+cpf.charAt(10));
        var soma1=0, soma2=0;
        var vlr =11;

        for(i=0;i<9;i++){
                soma1+=eval(cpf.charAt(i)*(vlr-1));
                soma2+=eval(cpf.charAt(i)*vlr);
                vlr--;
        }       
        soma1 = (((soma1*10)%11)==10 ? 0:((soma1*10)%11));
        soma2=(((soma2+(2*soma1))*10)%11);

        var digitoGerado=(soma1*10)+soma2;
        if(digitoGerado!=digitoDigitado)        
                alert('CPF Invalido!');         
}

//valida o CNPJ digitado
function ValidarCNPJ(cnpj){
        cnpj = cnpj.value.replace(/[^\d]+/g,'');
 
    if(cnpj == '') return false;
     
    if (cnpj.length < 14){
         alert('CNPJ não digitado corretamente ou faltando informação! Digite a forma correta Ex. 66.075.246/0001-30');
        return false;
    }
 
    // Elimina CNPJs invalidos conhecidos
    if (cnpj == "00000000000000" || 
        cnpj == "11111111111111" || 
        cnpj == "22222222222222" || 
        cnpj == "33333333333333" || 
        cnpj == "44444444444444" || 
        cnpj == "55555555555555" || 
        cnpj == "66666666666666" || 
        cnpj == "77777777777777" || 
        cnpj == "88888888888888" || 
        cnpj == "99999999999999")
        return false;
         
    // Valida DVs
    tamanho = cnpj.length - 2
    numeros = cnpj.substring(0,tamanho);
    digitos = cnpj.substring(tamanho);
    soma = 0;
    pos = tamanho - 7;
    for (i = tamanho; i >= 1; i--) {
      soma += numeros.charAt(tamanho - i) * pos--;
      if (pos < 2)
            pos = 9;
    }
    resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
    if (resultado != digitos.charAt(0))
        return false;
         
    tamanho = tamanho + 1;
    numeros = cnpj.substring(0,tamanho);
    soma = 0;
    pos = tamanho - 7;
    for (i = tamanho; i >= 1; i--) {
      soma += numeros.charAt(tamanho - i) * pos--;
      if (pos < 2)
            pos = 9;
    }
    resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
    if (resultado != digitos.charAt(1)){
         alert('CNPJ Inválido! Digite a forma correta Ex. 66.075.246/0001-30');
         return false
     }
    return true;
               

}

DISPARAR AÇÃO APÓS TECLAR ENTER DENTRO DE IMPUT COM JQUERY

PEGAR POSIÇÃO DO ELEMENTO FILHO COM MÉTODO INDEX() JQUERY

TABELA DE CODIFICAÇÃO PARA TEXTOS COM CARACTERES ESPECIAIS QUE SÃO EXIBIDOS PELO JAVASCRIPT

PEGAR CONTEÚDO DO IFRAME COM MÉTODO CONTENTS() JQUERY DO JAVASCRIPT

PASSAR VALOR STRING PARA FUNÇÃO JAVASCRIPT A PARTIR DE UMA CHAMADA QUE JÁ ESTÁ DENTRO DE UMA STRING

FUNÇÃO JAVASCRIPT COM JQUERY PARA MOSTRAR TOOLTIP

FORÇAR QUEBRA DE LINHA NO TEXTO HTML

A FORMA MAIS FÁCIL DE FAZER UPLOAD DE ARQUIVO COM JAVASCRITP AJAX JQUERY E PHP

MÁSCARA PARA CPF, CNPJ, CEP, TELEFONE, DATA, MOEDA, INTEIRO, FLOAT OU CPF/CNPJ NO MESMO CAMPO COM JAVASCRIPT E EXPRESSÃO REGULAR

VALIDAR CNPJ, CPF, TELEFONE, CEP E DATA EM JAVASCRIPT COM EXPRESSÃO REGULAR

Pesquisar

Perfil

Nayron Rufino

Posts Mais Vistos

Seguidores

Contatos

Categoria

Arquivo do blog

Tags

Compartilhe:

Tags

Compartilhe:

Tags

Compartilhe:

Tags

Compartilhe:

Tags

Compartilhe:

Tags

Compartilhe:

Tags

Compartilhe:

Tags

Compartilhe:

Tags

Compartilhe:

Tags

Compartilhe:

Pesquisar

Perfil

Nayron Rufino

Posts Mais Vistos

Seguidores

Contatos

Categoria

Arquivo do blog