Observe input value

How to use requestAnimationFrame to listen for property changes

by Trisox

HTML

<input type="text" value="Enter some text...">
<p id="output">

JavaScript

//Polyfill for requestAnimFrame
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

//Get a reference to the input and output
var input = document.querySelector("input");
var output = document.querySelector("#output");

//Set up a requestAnimationFrame loop
function update () {
  requestAnimationFrame(update);
    
  //Change the output to match the input
  output.innerHTML = input.value;
}
update();