5

Bom, nos sites hoje em dia são encontrados algumas coisas que eu não sei explicar, por exemplo, pense em um formulário pedindo seu nome, você preenche, e na mesma hora aparece encima o seu nome, como se você estivesse digitando e aparecendo no formulário e encima. Como posso fazer isso?

1
  • Por favor, selecione a resposta que resolveu ou te ajudou a resolver o problema, escolher a melhor resposta ajuda as próximas pessoas que tenham a mesma dúvida.
    – user3603
    3/08/2015 às 0:08

3 Respostas 3

6

Isso pode ser feito com javascript, manipulando o DOM a partir de eventos. Neste exemplo, cada vez que o valor do input for alterado, o valor da div também será.

  
 var alteraValor = function () {      
    document.getElementById('a').innerText = document.getElementById('b').value;        
}    
<input id="b" oninput="alteraValor()"/>    
 
<div id="a"></div>

2
  • Bom, eu queria que quando escrevesse aparecesse como div, tem como? 19/07/2015 às 0:13
  • Sim, @Fkda só mudar o elemento a seu alterado e sua propriedade. 19/07/2015 às 0:28
2

Usando jQuery pode ser algo assim:

<div id="div_nome"></div>
<form>
    <input id="nome" value="" />
</form>

$("#nome").keyup(function() {
    $("#div_nome").text($(this).val());
});
2
  • Não apareceu nada. Poderia me ajudar? 19/07/2015 às 0:05
  • 1
    Você incluiu o código jquery?
    – user3603
    19/07/2015 às 20:04
1

Uma outra forma de se obter o resultado desejado:

window.mostrarTexto= function(valor){
  var campo = document.getElementById("campo").value;
  div.innerHTML = campo; 
}
<input id="campo" type="text" onkeyup="mostrarTexto(this.value)"/>
<div id="div" style="display:block"></div>

A diferença dessa forma com a apresentada pelo @AlexSander e basicamente o evento que chama a função

onkeyup -> função é acionada quando o usuário solta uma tecla

oninput -> função é acionada quando o elemento recebe uma entrada do usuário

Vale lembrar que oninput e um atributo adicionado no HTML5 o que pode dificultar o seu uso em navegadores mais antigos...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .