How to write and appear somewhere what I wrote

5

Well, on websites nowadays some things are found that I can not explain, for example, think of a form asking for your name, you fill in, and at the same time your name appears on top of it, as if you were typing and appearing in the form and above. How can I do this?

    
asked by anonymous 19.07.2015 / 01:28

3 answers

6

This can be done with javascript by manipulating the DOM from events. In this example, each time the value of the input changes, the value of the div will also be

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

Using jQuery might look something like this:

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

$("#nome").keyup(function() {
    $("#div_nome").text($(this).val());
});
    
19.07.2015 / 01:49
1

Another way to get the desired result:

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>

The difference of this form with that presented by @AlexSander and basically the event that calls the function

  

onkeyup - > function is triggered when the user releases a key

     

oninput - > function is triggered when the element receives a user input

Note that oninput and an attribute added in HTML5 which can make it difficult to use in older browsers ...

    
20.07.2015 / 03:38