151 lines
5.4 KiB
HTML
151 lines
5.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Input Events</title>
|
|
<style>
|
|
div { padding:0px; margin: 0px; }
|
|
#trackPointer { position: fixed; }
|
|
#resultContainer { width: 600px; height: 60px; }
|
|
.area { width: 100px; height: 50px; background-color: #ccc; }
|
|
.block { width: 5px; height: 5px; border: solid 1px red; }
|
|
#dragArea { position: relative; }
|
|
#dragTarget { position: absolute; top:22px; left:47px;}
|
|
</style>
|
|
<script>
|
|
"use strict";
|
|
var allEvents = [];
|
|
function makeParagraph(message) {
|
|
let paragraph = document.createElement("p");
|
|
paragraph.textContent = message;
|
|
return paragraph;
|
|
}
|
|
function displayMessage(message) {
|
|
let eventNode = document.getElementById("events");
|
|
eventNode.innerHTML = ""
|
|
eventNode.appendChild(makeParagraph(message));
|
|
}
|
|
|
|
function appendMessage(message) {
|
|
document.getElementById("events").appendChild(makeParagraph(message));
|
|
}
|
|
|
|
/**
|
|
* 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 recordKeyboardEvent(event) {
|
|
var key = escapeSurrogateHalf(event.key);
|
|
allEvents.push({
|
|
"code": event.code,
|
|
"key": key,
|
|
"which": event.which,
|
|
"location": event.location,
|
|
"alt": event.altKey,
|
|
"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 + ", " +
|
|
"keyCode: " + event.keyCode);
|
|
}
|
|
function recordInputEvent(event) {
|
|
allEvents.push({
|
|
"data": event.data,
|
|
"inputType": event.inputType,
|
|
"isComposing": event.isComposing,
|
|
});
|
|
appendMessage("InputEvent " +
|
|
"data: " + event.data + ", " +
|
|
"inputType: " + event.inputType + ", " +
|
|
"isComposing: " + event.isComposing);
|
|
}
|
|
function recordPointerEvent(event) {
|
|
if (event.type === "contextmenu") {
|
|
event.preventDefault();
|
|
}
|
|
allEvents.push({
|
|
"type": event.type,
|
|
"button": event.button,
|
|
"buttons": event.buttons,
|
|
"pageX": event.pageX,
|
|
"pageY": event.pageY,
|
|
"ctrlKey": event.ctrlKey,
|
|
"metaKey": event.metaKey,
|
|
"altKey": event.altKey,
|
|
"shiftKey": event.shiftKey,
|
|
"target": event.target.id
|
|
});
|
|
appendMessage(event.type + " " +
|
|
"pageX: " + event.pageX + ", " +
|
|
"pageY: " + event.pageY + ", " +
|
|
"button: " + event.button + ", " +
|
|
"buttons: " + event.buttons + ", " +
|
|
"ctrlKey: " + event.ctrlKey + ", " +
|
|
"altKey: " + event.altKey + ", " +
|
|
"metaKey: " + event.metaKey + ", " +
|
|
"shiftKey: " + event.shiftKey + ", " +
|
|
"target id: " + event.target.id);
|
|
}
|
|
function resetEvents() {
|
|
allEvents.length = 0;
|
|
displayMessage("");
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
let keyReporter = document.getElementById("keys");
|
|
keyReporter.addEventListener("keyup", recordKeyboardEvent);
|
|
keyReporter.addEventListener("keypress", recordKeyboardEvent);
|
|
keyReporter.addEventListener("keydown", recordKeyboardEvent);
|
|
keyReporter.addEventListener("input", recordInputEvent);
|
|
|
|
let mouseReporter = document.getElementById("pointers");
|
|
mouseReporter.addEventListener("click", recordPointerEvent);
|
|
mouseReporter.addEventListener("dblclick", recordPointerEvent);
|
|
mouseReporter.addEventListener("mousedown", recordPointerEvent);
|
|
mouseReporter.addEventListener("mouseup", recordPointerEvent);
|
|
mouseReporter.addEventListener("contextmenu", recordPointerEvent);
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="trackPointer" class="block"></div>
|
|
<div>
|
|
<h2>KeyReporter</h2>
|
|
<!-- Dummy Button is used to ensure pressing Shift+Tab on <input> will make the new focus
|
|
- remains in the same document, rather than the Chrome UI. -->
|
|
<button>Dummy Button</button>
|
|
<input type="text" id="keys" size="80">
|
|
</div>
|
|
<div>
|
|
<h2>ClickReporter</h2>
|
|
<div id="pointers" class="area">
|
|
</div>
|
|
</div>
|
|
<div id="resultContainer">
|
|
<h2>Events</h2>
|
|
<div id="events"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|