-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathKeyboardState.html
124 lines (121 loc) · 3 KB
/
KeyboardState.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<!-- Simple keyboard state handler, Vincent Scheib. -->
<!-- Adapted from http://www.cryer.co.uk/resources/javascript/script20_respond_to_keypress.htm -->
<html><body>
<table border="1" cellspacing="0">
<tbody><tr>
<th>KeyDown</th>
<th>KeyUp</th>
<th>KeyPress</th>
</tr>
<tr>
<td id="td-keydown" style="width: 12em" class="center">.</td>
<td id="td-keyup" style="width: 12em" class="center">.</td>
<td id="td-keypress" style="width: 12em" class="center">.</td>
</tr>
</tbody></table>
<pre id="keyStateDisplay">No key events captured yet.</pre>
<div id="keyLog"></div>
<script type="text/javascript">
var keyStateDict = {};
function updateInnerHTML(idToUpdate, description)
{
var cell = document.getElementById(idToUpdate);
cell.innerHTML = description;
}
function displayKeyState()
{
var s = document.getElementById("keyStateDisplay");
var ss = JSON.stringify(keyStateDict);
var re = new RegExp("[,{}] *", "g");
ss = ss.replace(re, "\n");
s.innerHTML = ss;
}
function updateKeyState(event, description)
{
keyStateDict[GetCodeFor(event)] = description;
displayKeyState();
}
function logEvent(description)
{
var logDiv = document.getElementById("keyLog");
var entry = document.createElement("div");
entry.innerText = description;
logDiv.insertBefore(entry, logDiv.firstChild)
}
function GetCodeFor(e)
{
if ((e.charCode) && (e.keyCode==0))
{
return e.charCode;
} else {
return e.keyCode;
}
}
function GetDescriptionFor(e)
{
var result, code;
if ((e.charCode) && (e.keyCode==0))
{
result = "charCode: " + e.charCode;
code = e.charCode;
} else {
result = "keyCode: " + e.keyCode;
code = e.keyCode;
}
if (code == 8) result += " BKSP"
else if (code == 9) result += " TAB"
else if (code == 46) result += " DEL"
else if ((code >= 41) && (code <=126)) result += " '" + String.fromCharCode(code) + "'";
if (e.shiftKey) result += " shift";
if (e.ctrlKey) result += " ctrl";
if (e.altKey) result += " alt";
return result;
}
function MonitorKeyDown(e)
{
if (!e) e=window.event;
d = GetDescriptionFor(e);
updateInnerHTML("td-keydown", d);
updateKeyState(e, d + " == DOWN");
logEvent(d + " == down");
return false;
}
function MonitorKeyUp(e)
{
if (!e) e=window.event;
d = GetDescriptionFor(e);
updateInnerHTML("td-keyup", d);
updateKeyState(e, d + " == up");
logEvent(d + " == up");
return false;
}
function MonitorKeyPress(e)
{
if (!e) e=window.event;
d = GetDescriptionFor(e);
updateInnerHTML("td-keypress", d);
logEvent(d + " == press");
return false;
}
function MonitorBlur()
{
for (key in keyStateDict)
{
if (keyStateDict[key].indexOf("blurred") < 0)
keyStateDict[key] += "; when document blurred"
}
displayKeyState();
logEvent("blur");
}
function MonitorFocus()
{
logEvent("focus");
}
document.onkeydown = MonitorKeyDown;
document.onkeyup = MonitorKeyUp;
document.onkeypress = MonitorKeyPress;
document.body.onblur = MonitorBlur;
document.body.onfocus = MonitorFocus;
</script>
</body></html>