Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <input id="input" type="text" onkeydown="keyDownHandler(event)" onkeypress="keyPressHandler(event)">
<div id="output">
</div> <br>
    <input type="button" onclick="clearFields()" value="Clear">
  </body>

</html>

// Sample plunker that demonstrates an issue similar to VM web console
// outputting double characters on Firefox.

var key, timeoutHandler;

function appendToOutput(k) {
   var output = document.getElementById('output');
   output.innerHTML += k;
}

function keyDownHandler(e) {
   key = e.key;
   // Setting even a minimal timeout resolves double characters on Firefox.
   // var timeout = (typeof InstallTrigger !== 'undefined') ? 1 : 0;
   var timeout = 0;
   
   timeoutHandler = setTimeout(function() {
     if (!!key) {
        appendToOutput(key);
     }
     timeoutHandler = null;
     key = null;
   }, timeout);
   
   // Waste some time. This brings the behaviour closer to web console.
   // Removing this timesink results in double characters always displayed
   // on Firefox.
   var x = "0";
   var n = Math.ceil(Math.random() * 1000000);
   for (var i = 0; i < n; i++) {
     x += i;
   }
   
   console.log(x.substr(0, 1));
}

function keyPressHandler(e) {
   if (!!timeoutHandler) {
     clearTimeout(timeoutHandler);
     timeoutHandler = null;
     key = null;
   }
   appendToOutput(e.key);
}

function clearFields() {
  document.getElementById('output').innerHTML = '';
  document.getElementById('input').value = '';
}

/* Styles go here */