Como passar o texto de uma input para uma div sem refresh?

[bnogueira02 2]

Pessoal estou com a seguinte duvida.

Preciso pegar o texto do campo sigla e jogar ele automaticamente para a div url amigavel.

Não consegui achar isso na internet. Pelo menos não pelo nome que procurei.

[reebr 94]

"Jogar" em que momento? Enquanto é digitado? Depois que o input perder o foco? ... ?

 

Uma forma de fazer (demo):

<input type='text'/>
<div id='url-amigavel'>
    http://meusite.com/<span></span>
</div>

var $dynamic = document.querySelector('#url-amigavel span');

document.querySelector('input').addEventListener('keypress', function(){
    $dynamic.innerHTML = this.value;
});

[bnogueira02 2]

Obrigado amigo!

[bnogueira02 2]

Depois que a input peder o foco, testei desse modo, mas anda não deu certo.

[William Bruno 1501]

O que aconteceu de errado ? como está o teu código ?

[bnogueira02 2]

<div class="form-group">
<label>Caminho da url amigavel:</label>
<p class="form-control-static" id="url-amigavel"><span></span></p>
<input class="form-control" type="hidden" placeholder="Sigla do pais:">
<p class="help-block">Esse campo é gerado automaticamente.</p>
</div>
 

<script type="text/javascript">
    var $dynamic = document.querySelector('#url-amigavel span');
 
    document.querySelector('#url').addEventListener('keypress', function () {
        $dynamic.innerHTML = this.value;
    });
</script>

Quanto eu digito a ultima letra, ela não passa para o span.

Se eu digito SP, Ele só repassa o S

[angelorubin 142]

O evento é blur, não keypress.

https://developer.mozilla.org/en-US/docs/Web/Events/blur