Echo in real time

Question

How can I display what was typed in a field <input /> or <textarea> real-time in PHP, like the one in Stack-Overflow ?

Answer 1

With php there is no way to do this "in real time". PHP is a server-side language (processes things on the server side), which will send a data output to the client (browser).

After this output occurs, what can be done is to use Javascript to perform such an operation.

Behold:

window.onload = function () {
     
  function qs(el){
    return document.querySelector(el);
  }
  
  var saida = qs('#saida');
  
  qs('#texto').addEventListener('input', function () {
      saida.innerHTML = this.value;  
  });
}

<div id="saida"></div>
<textarea id="texto"></textarea>

In that case, I used the event inputto capture what is typed in textarea and then pass it to html. But you can use keyup.

Heed: to avoid HTML injection into the code, rather than using innerHTML, use innerText.

window.onload = function () {
     
  function qs(el){
    return document.querySelector(el);
  }
  
  var saida = qs('#saida');
  
  qs('#texto').addEventListener('input', function () {
      saida.innerText = this.value;  
  });
}

<div id="saida"></div>
<textarea id="texto"></textarea>