Mostrando Texto ao Digitar no Imput Text com Javascript

[Dr. Programador 0]

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> 

 

[Jorge10 0]

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:

 

[JoaoVituBR 0]

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