<!doctype html>
<meta charset=utf-8>
<head>
    <title>Test Keys</title>
    <script>
        var allEvents = {events: []};
        function displayMessage(message) {
            document.getElementById("events").innerHTML = "<p>" + message + "</p>";
        }

        function appendMessage(message) {
            document.getElementById("events").innerHTML += "<p>" + message + "</p>";
        }

        /**
         * Escape |key| if it's in a surrogate-half character range.
         *
         * Example: given "\ud83d" return "U+d83d".
         *
         * Otherwise JSON.stringify will convert it to U+FFFD (REPLACEMENT CHARACTER)
         * when returning a value from executeScript, for example.
         */
        function escapeSurrogateHalf(key) {
          if (typeof key !== "undefined" && key.length === 1) {
            var charCode = key.charCodeAt(0);
            var highSurrogate = charCode >= 0xD800 && charCode <= 0xDBFF;
            var surrogate = highSurrogate || (charCode >= 0xDC00 && charCode <= 0xDFFF);
            if (surrogate) {
              key = "U+" + charCode.toString(16);
            }
          }
          return key;
        }

        function recordEvent(event) {
          var key = escapeSurrogateHalf(event.key);
          allEvents.events.push({
            "code": event.code,
            "key": key,
            "which": event.which,
            "location": event.location,
            "ctrl": event.ctrlKey,
            "meta": event.metaKey,
            "shift": event.shiftKey,
            "repeat": event.repeat,
            "type": event.type
          });
          appendMessage(`${event.type}(code:${event.code}, key:${key}, which:${event.which})`);
        }

        function resetEvents() {
            allEvents.events.length = 0;
            displayMessage("");
        }
    </script>
</head>
<body>
  <div>
    <h2>KeyReporter</h2>
    <input type="text" id="keys" size="80"
           onkeyup="recordEvent(event)"
           onkeypress="recordEvent(event)"
           onkeydown="recordEvent(event)">
  </div>
  <div id="resultContainer" style="width:300;height:60">
    <h2>Events</h2>
    <div id="events"></div>
  </div>
</body>