|
1
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
2
|
<html>
|
|
3
|
<head>
|
|
4
|
<title>Javascript Key Event Tester</title>
|
|
5
|
<script type="text/javascript" >
|
|
6
|
var p2j = {};
|
|
7
|
p2j.isFirefox = true;
|
|
8
|
</script>
|
|
9
|
|
|
10
|
<script type="text/javascript" src=p2j.keymap.js></script>
|
|
11
|
<script type="text/javascript" src=p2j.keyboard.js></script>
|
|
12
|
<script language="JavaScript">
|
|
13
|
|
|
14
|
var lines= 0;
|
|
15
|
var maxlines= 1000;
|
|
16
|
|
|
17
|
function init()
|
|
18
|
{
|
|
19
|
var cfg = {
|
|
20
|
isGui : true
|
|
21
|
};
|
|
22
|
|
|
23
|
|
|
24
|
p2j.clipboard = {enabled: false};
|
|
25
|
p2j.socket = {send: function(data)
|
|
26
|
{
|
|
27
|
console.log(data);
|
|
28
|
}};
|
|
29
|
|
|
30
|
document.testform.t.value+= '';
|
|
31
|
lines= 0;
|
|
32
|
|
|
33
|
if (document.addEventListener)
|
|
34
|
{
|
|
35
|
document.addEventListener("keydown",keydown,false);
|
|
36
|
document.addEventListener("keypress",keypress,false);
|
|
37
|
document.addEventListener("keyup",keyup,false);
|
|
38
|
document.addEventListener("textInput",textinput,false);
|
|
39
|
}
|
|
40
|
else if (document.attachEvent)
|
|
41
|
{
|
|
42
|
document.attachEvent("onkeydown", keydown);
|
|
43
|
document.attachEvent("onkeypress", keypress);
|
|
44
|
document.attachEvent("onkeyup", keyup);
|
|
45
|
document.attachEvent("ontextInput", textinput);
|
|
46
|
}
|
|
47
|
else
|
|
48
|
{
|
|
49
|
document.onkeydown= keydown;
|
|
50
|
document.onkeypress= keypress;
|
|
51
|
document.onkeyup= keyup;
|
|
52
|
document.ontextinput= textinput;
|
|
53
|
}
|
|
54
|
}
|
|
55
|
|
|
56
|
function showmesg(t)
|
|
57
|
{
|
|
58
|
var old= document.testform.t.value;
|
|
59
|
if (lines >= maxlines)
|
|
60
|
{
|
|
61
|
var i= old.indexOf('\n');
|
|
62
|
if (i >= 0)
|
|
63
|
old= old.substr(i+1);
|
|
64
|
}
|
|
65
|
else
|
|
66
|
lines++;
|
|
67
|
|
|
68
|
document.testform.t.value= old + t + '\n';
|
|
69
|
}
|
|
70
|
|
|
71
|
function keyval(n)
|
|
72
|
{
|
|
73
|
if (n == null) return 'undefined';
|
|
74
|
var s= pad(3,n);
|
|
75
|
if (n >= 32 && n < 127) s+= ' (' + String.fromCharCode(n) + ')';
|
|
76
|
while (s.length < 9) s+= ' ';
|
|
77
|
return s;
|
|
78
|
}
|
|
79
|
|
|
80
|
function keymesg(w,e)
|
|
81
|
{
|
|
82
|
var row= 0;
|
|
83
|
var head= [w, ' '];
|
|
84
|
if (document.testform.classic.checked)
|
|
85
|
{
|
|
86
|
showmesg(head[row] +
|
|
87
|
' keyCode=' + keyval(e.keyCode) +
|
|
88
|
' which=' + keyval(e.which) +
|
|
89
|
' charCode=' + keyval(e.charCode));
|
|
90
|
row= 1;
|
|
91
|
}
|
|
92
|
if (document.testform.modifiers.checked)
|
|
93
|
{
|
|
94
|
showmesg(head[row] +
|
|
95
|
' shiftKey='+pad(5,e.shiftKey) +
|
|
96
|
' ctrlKey='+pad(5,e.ctrlKey) +
|
|
97
|
' altKey='+pad(5,e.altKey) +
|
|
98
|
' metaKey='+pad(5,e.metaKey));
|
|
99
|
row= 1;
|
|
100
|
}
|
|
101
|
if (document.testform.dom3.checked)
|
|
102
|
{
|
|
103
|
showmesg(head[row] +
|
|
104
|
' key='+e.key +
|
|
105
|
' char='+e.char +
|
|
106
|
' location='+e.location +
|
|
107
|
' repeat='+e.repeat);
|
|
108
|
row= 1;
|
|
109
|
}
|
|
110
|
if (document.testform.olddom3.checked)
|
|
111
|
{
|
|
112
|
showmesg(head[row] +
|
|
113
|
' keyIdentifier='+ pad(8,e.keyIdentifier)+
|
|
114
|
' keyLocation='+e.keyLocation);
|
|
115
|
row= 1;
|
|
116
|
}
|
|
117
|
if (document.testform.p4gl.checked)
|
|
118
|
{
|
|
119
|
|
|
120
|
showmesg(head[row] +
|
|
121
|
' hasLabel='+ pad(8,p2j.keymap.keyboardMapping.hasLabelForCode(p2j.keymap.mapKey(e)))+
|
|
122
|
' 4gl code='+p2j.keymap.mapKey(e));
|
|
123
|
row= 1;
|
|
124
|
}
|
|
125
|
if (row == 0)
|
|
126
|
showmesg(head[row]);
|
|
127
|
}
|
|
128
|
|
|
129
|
function pad(n,s)
|
|
130
|
{
|
|
131
|
s+= '';
|
|
132
|
while (s.length < n) s+= ' ';
|
|
133
|
return s;
|
|
134
|
}
|
|
135
|
|
|
136
|
function suppressdefault(e,flag)
|
|
137
|
{
|
|
138
|
if (flag)
|
|
139
|
{
|
|
140
|
if (e.preventDefault) e.preventDefault();
|
|
141
|
if (e.stopPropagation) e.stopPropagation();
|
|
142
|
}
|
|
143
|
return !flag;
|
|
144
|
}
|
|
145
|
|
|
146
|
function keydown(e)
|
|
147
|
{
|
|
148
|
if (!e) e= event;
|
|
149
|
keymesg('keydown ',e);
|
|
150
|
return suppressdefault(e,document.testform.keydown.checked);
|
|
151
|
}
|
|
152
|
|
|
153
|
function keyup(e)
|
|
154
|
{
|
|
155
|
if (!e) e= event;
|
|
156
|
keymesg('keyup ',e);
|
|
157
|
return suppressdefault(e,document.testform.keyup.checked);
|
|
158
|
}
|
|
159
|
|
|
160
|
function keypress(e)
|
|
161
|
{
|
|
162
|
if (!e) e= event;
|
|
163
|
keymesg('keypress',e);
|
|
164
|
return suppressdefault(e,document.testform.keypress.checked);
|
|
165
|
}
|
|
166
|
|
|
167
|
function textinput(e)
|
|
168
|
{
|
|
169
|
if (!e) e= event;
|
|
170
|
|
|
171
|
showmesg('textInput data='+e.data);
|
|
172
|
return suppressdefault(e,document.testform.textinput.checked);
|
|
173
|
}
|
|
174
|
</script>
|
|
175
|
</head>
|
|
176
|
<body>
|
|
177
|
<form name="testform">
|
|
178
|
<h2>Javascript Key Event Test Script</h2><p>
|
|
179
|
Type keys in the text area below to see the Javascript events triggered
|
|
180
|
and the values returned.
|
|
181
|
Notes on test results from the page are at
|
|
182
|
<a href="http://unixpapa.com/js/key.html">http://unixpapa.com/js/key.html</a>.
|
|
183
|
<p>
|
|
184
|
On most browsers, suppressing the default action on keypress events prevents
|
|
185
|
the browser from processing the keystroke. On some browsers, suppressing the
|
|
186
|
default action on keydown prevents keypress or keyup events from triggering.
|
|
187
|
Textinput events normally won't be seen unless you turn off default
|
|
188
|
suppression on keydown and keypress.
|
|
189
|
<p>
|
|
190
|
Your browser: <strong>
|
|
191
|
<script>
|
|
192
|
document.write(navigator.userAgent);
|
|
193
|
</script>
|
|
194
|
</strong>
|
|
195
|
<p>
|
|
196
|
<table>
|
|
197
|
<tr><td>Suppress default handling of:</td>
|
|
198
|
<td><input type="checkbox" name="keydown" value="1"> keydown
|
|
199
|
|
|
200
|
<input type="checkbox" name="keypress" value="1" checked> keypress
|
|
201
|
|
|
202
|
<input type="checkbox" name="keyup" value="1"> keyup
|
|
203
|
|
|
204
|
<input type="checkbox" name="textinput" value="1"> textinput
|
|
205
|
</td></tr>
|
|
206
|
<tr><td>Show attribute values for:</td>
|
|
207
|
<td><input type="checkbox" name="classic" value="1" checked> classic
|
|
208
|
|
|
209
|
<input type="checkbox" name="modifiers" value="1"> modifiers
|
|
210
|
|
|
211
|
<input type="checkbox" name="dom3" value="1"> DOM 3
|
|
212
|
|
|
213
|
<input type="checkbox" name="olddom3" value="1"> old DOM 3
|
|
214
|
|
|
215
|
<input type="checkbox" name="p4gl" value="1"> Progress 4GL
|
|
216
|
</td></tr>
|
|
217
|
</table>
|
|
218
|
<textarea name="t" rows="24" cols="90"></textarea>
|
|
219
|
<br>
|
|
220
|
<input type="reset" onclick="document.testform.t.value='';lines=0;return false">
|
|
221
|
</form>
|
|
222
|
<script language="JavaScript">
|
|
223
|
init();
|
|
224
|
</script>
|
|
225
|
</body>
|
|
226
|
</html>
|