mirror of
https://github.com/roytam1/basilisk55.git
synced 2026-07-05 23:10:18 +00:00
71 lines
2.2 KiB
HTML
71 lines
2.2 KiB
HTML
<!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>
|
|
</html>
|