mirror of
https://github.com/SerenityOS/serenity.git
synced 2025-01-23 01:41:59 -05:00
Base: Add a test page to log KeyboardEvent data
This page prepends a row to a table with the last-received KeyboardEvent.
This commit is contained in:
parent
cd995d113b
commit
af5eaf5edf
1 changed files with 56 additions and 0 deletions
56
Base/res/html/misc/key-logger.html
Normal file
56
Base/res/html/misc/key-logger.html
Normal file
|
@ -0,0 +1,56 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style type="text/css">
|
||||||
|
table, td, th {
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Key</th>
|
||||||
|
<th>Code</th>
|
||||||
|
<th>Location</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id=table></tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
let table = document.getElementById('table');
|
||||||
|
|
||||||
|
document.addEventListener('keydown', (event) => {
|
||||||
|
let row = document.createElement('tr');
|
||||||
|
table.prepend(row);
|
||||||
|
|
||||||
|
let key = document.createElement('td');
|
||||||
|
key.textContent = event.key;
|
||||||
|
row.append(key);
|
||||||
|
|
||||||
|
let code = document.createElement('td');
|
||||||
|
code.textContent = event.code;
|
||||||
|
row.append(code);
|
||||||
|
|
||||||
|
let location = document.createElement('td');
|
||||||
|
switch (event.location) {
|
||||||
|
case KeyboardEvent.DOM_KEY_LOCATION_STANDARD:
|
||||||
|
location.textContent = 'Standard';
|
||||||
|
break;
|
||||||
|
case KeyboardEvent.DOM_KEY_LOCATION_LEFT:
|
||||||
|
location.textContent = 'Left';
|
||||||
|
break;
|
||||||
|
case KeyboardEvent.DOM_KEY_LOCATION_RIGHT:
|
||||||
|
location.textContent = 'Right';
|
||||||
|
break;
|
||||||
|
case KeyboardEvent.DOM_KEY_LOCATION_NUMPAD:
|
||||||
|
location.textContent = 'Numpad';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
row.append(location);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Reference in a new issue