Ir para conteúdo
Dr. Programador

Mostrando Texto ao Digitar no Imput Text com Javascript

Recommended Posts

Boa noite, pessoal!

 

Estou batendo cabeça com a seguinte situação:

 

Ao digitar no imput text, o texto aparece em tempo real na tela (funciona perfeitamente).

Ocorre que, quando eu aciono a ação do form, o texto desaparece da tela.

 

Gostaria que, ao ser acionado a ação do form, o texto que foi digitado no imput text, permaneça na tela. Tentei usar session no javascript mas não obtive sucesso.

 

 

Vejam o código abaixo:

    Mostra aqui em tempo real:
    <span id="digitar"></span>

    <form action="adicionar.php" method="post">
        <input name="email" id="email" value="" type="text" onkeyup="myFunction()">
        <input name="submit" type="submit" value="Adicionar E-mail">
    </form>  

    <script language="javascript">
    function myFunction()
    {
        var x = document.getElementById("email").value;
        document.getElementById("digitar").innerHTML = x;
    }
    </script> 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você pode guardar dados usando localStorage.

 

Dessa forma, você consegue o resultado pretendido:

 

<span id="digitar"></span>

    <form action="adicionar.php"  method="post">
        <input name="email" id="email" value="" type="text" onkeyup="myFunction()">
        <input name="submit" type="submit" value="Adicionar E-mail">
    </form>  

    <script language="javascript">
    function myFunction()
    {
        var x = document.getElementById("email").value;
        document.getElementById("digitar").innerHTML = x;
		window.localStorage.setItem('myText', x); //guardando o texto
		
    }		 
		
	let myText = window.localStorage.getItem('myText');	 //pega o conteudo armazenado e salva na variavel	
		
	if(myText) { 
		document.getElementById("digitar").innerHTML = myText;
	}
    </script> 

Veja funcionando no gif abaixo:

 

teste.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você pode usar Cookies para salvar as variáveis no navegador!
Para salvar: 

setCookie("nome", "valor", "duração (dias)")

Para pegar: 

getCookie("nome")
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    console.log("Cookie '"+cname+"' was saved for "+exdays+" days with the value: "+cvalue);
    location.reload();
}
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

Mais em: https://www.w3schools.com/js/js_cookies.asp

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Claudia França
      Pessoal escrevi o código,  (  <style id=”antiClickjack”>body{display:important;}</style>
      <script type=”text/javascript”>
      if (self === top) {
      var antiClickjack = document.getElementById(“antiClickjack”);
      antiClickjack.parentNode.removeChild(antiClickjack);
      } else {
      top.location = self.location;
      }
      </script> ) em um site o head por exigência da empresa de cartão, mas tenho percebido que com um tempo o site para de acionar o java script para carregar outra pagina.  Isso aconteceu depois desse código. Eu tenho que escrever algo no corpo no site para isso nao mais acontecer e deixar o anticlick habilitado. ?
    • Por Carcleo
      jQuery:
          // JavaScript Document          $(document).ready(function (e) {                  $("#idPastor").on("change", function () {                          $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosRedes.php",                 type: "POST",                 dataType: "json",                 data: {                       idPastor: $("#idPastor").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idRede').find('option').remove();                                          if (result == null){                         $("#idRede").append("<option value=>Sem Redes</option>");                     } else {                         $("#idRede").append("<option value=>Escolha a Rede</option>");                         result.forEach(function(option){                             $("#idRede").append("<option value=" + option["idRede"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idRede").on("change", function () {                                                $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosRegioes.php",                 type: "POST",                 dataType: "json",                 data: {                       idRede: $("#idRede").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idRegiao').find('option').remove();                     if (result == null){                         $("#idRegiao").append("<option value=>Sem Regiões</option>");                     } else {                         $("#idRegiao").append("<option value=>Escolha a Região</option>");                                                 result.forEach(function(option){                             $("#idRegiao").append("<option value=" + option["idRegiao"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idRegiao").on("change", function () {                                                       $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosAreas.php",                 type: "POST",                 dataType: "json",                 data: {                       idRegiao: $("#idRegiao").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                             $('#idArea').find('option').remove();                                 if (result == null){                             $("#idArea").append("<option value=>Sem Áreas</option>");                     } else {                                     $("#idArea").append("<option value=>Escolha a Área</option>");                             result.forEach(function(option){                             $("#idArea").append("<option value=" + option["idArea"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idArea").on("change", function () {                                                   $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosSetores.php",                 type: "POST",                 dataType: "json",                 data: {                       idArea: $("#idArea").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idSetor').find('option').remove();                                             if (result == null){                         $("#idSetor").append("<option value=>Sem Setores</option>");                     } else {                         $("#idSetor").append("<option value=>Escolha a Setor</option>");                                 result.forEach(function(option){                             $("#idSetor").append("<option value=" + option["idSetor"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idSetor").on("change", function () {                                                       $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosCelulas.php",                 type: "POST",                 dataType: "json",                 data: {                       idSetor: $("#idSetor").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idCelula').find('option').remove();                             if (result == null){                         $("#idCelula").append("<option value=>Sem Celulas</option>");                     } else {                         $("#idCelula").append("<option value=>Escolha a Célula</option>");                                 result.forEach(function(option){                             $("#idCelula").append("<option value=" + option["idCelula"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                   }); Esse script, faz a população via $.ajax do jQuery de combos no form.
      Tudo funciona bem.
      Mas considere o o form abaixo:

       
      Imagine o que o usuário preencheu todos os campos e de repente resolve tocar a opção do select de Redes como está na figura.
      Porém, a opção Rede 2 NÃO possui Regiões Cadastradas ainda.
      No entanto, note que todos os campos abaixo estão preenchidos e isso não negaria um possível submit do form com dados errados?
      Ainda,  imagine a situação onde a opção Rede 2 POSSUI outas Regiões Cadastradas o que comprometeria a escolha dos selects que seguem
       
      Como contornar esse problema?
       
    • Por igoraraujowd
      Pessoal,
       
      Estou trabalhando em um teste A/B e preciso fazer uma modificação no código do menu. Estou utilizando o Mega Site Menu e preciso que o site fique sempre com o hamburger menu ainda que em desktop.
      https://codyhouse.co/gem/css-mega-site-navigation
       
      Pra fazer isso, eu precisaria fazer 2 alterações no código abaixo:
      https://ghostbin.com/paste/fjy3t
      1 - Alterar o valor da variável MqL
      2 - Anular as linhas abaixo na função moveNavigation:
      //navigation.insertBefore('.menu--mobile-header-cta'); //$('.nav-overlay').removeClass('is-visible'); A questão é que eu não posso fazer essas alterações diretamente no código e precisaria inserir algo em tags <script> que sobscrevesse a função e alterasse os pontos acima. É possível?
    • Por clickanapolis
      Pessoal peguei esse codigo de auto somar valor com quantidade na internet e não estou conseguindo ajustar ele.
       
      Ate que no total eu consegui incluir 2 casas decimais.
       
      Mais no subtotal não, e alem disso gostaria de colocar ele com extensão em moeda real o valor tipo:
       
      1500 para 1.500,00
       
      como eu faria:
       
      <script type="text/javascript"> $(window).load(function(){ function id( el ){ //return document.getElementById( el ); return $( el ); } function calcTotal( un01, qnt01 ) { return un01 * qnt01; } function getElementParent(event){ return event.srcElement.parentNode.parentNode.getAttribute('id'); } function getValorUnitario(elParent){ return $('#'+elParent+' .class_unit input').val(); } function getQuantidade(elParent){ return $('#'+elParent+' .class_quant input').val(); } function setFieldTotal(elParent, valueUnit, valueQuant){ id('#'+elParent+' .class_total input').val(calcTotal( valueUnit , valueQuant)); setTotalFinal(); } function setTotalFinal(){ var total = 0; $('#table-shop tr .class_total input').each(function(){ if(this.value != ''){ var valor = this.value; total += parseFloat(valor); } }); $('#total .value_total').html(total.toFixed(2)); $('#total .value_total').val(total.toFixed(2)); } $(document).ready(function(){ id('#table-shop tr .class_unit').keyup(function(event) { var elemenPai = getElementParent(event); var valueUnit = getValorUnitario(elemenPai); var valueQuant = getQuantidade(elemenPai); setFieldTotal(elemenPai, valueUnit , valueQuant); }); id('#table-shop tr .class_quant').keyup(function(event) { var elemenPai = getElementParent(event); var valueUnit = getValorUnitario(elemenPai); var valueQuant = getQuantidade(elemenPai); setFieldTotal(elemenPai, valueUnit , valueQuant); }); }); }); </script>  
    • Por Ricardo Beira
      Boa tarde.
       
      Sou bem leigo em php, sei o básico do básico e preciso muito de ajuda.
      Preciso enviar 1000 emails, porém queria dividir os envios de 50 por vez.
      Queria um campo onde ecolocava os 1000 emails ou importando de um txt e ele fizesse o processo de envio de 50-50 automaticamente.
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.