How to write and appear somewhere what I wrote

Asked

Viewed 446 times

5

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

  • Please select the answer that solved or helped you solve the problem, choose the best answer helps the next people who have the same question.

3 answers

6


This can be done with javascript, manipulating the DOM from events. In this example, each time the input value is changed, 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>

  • Well, I wish that when I wrote I’d show up as a div?

  • Yes, @Fkda just change the element to its changed and its property.

2

Using jQuery can be something like this:

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

$("#nome").keyup(function() {
    $("#div_nome").text($(this).val());
});
  • Nothing came up. Could you help me?

  • 1

    You included the code jquery?

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 this way with the one 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

It is worth remembering that oninput and an attribute added to HTML5 which may hinder its use in older browsers...

Browser other questions tagged

You are not signed in. Login or sign up in order to post.