-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathkeypress.html
129 lines (98 loc) · 4.58 KB
/
keypress.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
125
126
127
128
129
<!--
To change this template use Tools | Templates.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Keyboard Events - keypress</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
canvas.default { border: 1px solid black; }
canvas.active { border: 1px solid red; }
div.feedback { color: red; font-size: 1.0em; }
</style>
<!--SCRIPTS-->
<script type="text/javascript">
var handlekeypress = function(e) {
var char = (e.key) ? e.key : e.charCode;
UpdateText(char);
return false;
}
var handlefocus = function(e){
var elements = document.getElementsByClassName('active');
var index;
for(index = 0; index < elements.length; index++){
elements[0].className = 'default';
}
e.srcElement.className = 'active';
var text = document.getElementById('text');
text.innerHTML = 'Active Canvas';
draw('Press keys!');
return false;
}
var handleblur = function(e){
var elements = document.getElementsByClassName('active');
var index;
for(index = 0; index < elements.length; index++){
elements[0].className = 'default';
}
var textElements = document.getElementsByClassName('feedback');
for(index = 0; index < textElements.length; index++){
textElements[0].innerHTML = '';
}
draw('Click me!');
}
function draw(text) {
// Get a reference to the canvas
var canvas = document.getElementById('canvas');
canvas.addEventListener('keypress', handlekeypress, false);
canvas.addEventListener('focus', handlefocus, false);
canvas.addEventListener('blur', handleblur, false);
// Get a reference to the drawing context
var ctx = canvas.getContext('2d');
clearCanvas(ctx);
gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
// Add the colors with fixed stops at 1/4 of the width.
gradient.addColorStop("0", "black");
// Set the fill pattern
ctx.fillStyle = gradient;
// Set the font
ctx.font = "italic 200 36px/2 Unknown Font, sans-serif"
ctx.fillText("keypress event", 20, 40);
gradient.addColorStop("0", "gray");
ctx.fillText(text, canvas.width/2 - 90, canvas.height/2);
}
function UpdateText(input) {
// Get a reference to the canvas
var canvas = document.getElementById('canvas');
// Get a reference to the drawing context
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
// Add the colors with fixed stops at 1/4 of the width.
gradient.addColorStop("0", "black");
// Set the fill pattern
ctx.fillStyle = gradient;
// Set the font
ctx.font = "italic 200 36px/2 Unknown Font, sans-serif"
ctx.fillText("keypress event", 20, 40);
gradient.addColorStop("0", "gray");
ctx.fillText("keyChr: " + input, 40, canvas.height/2);
}
function clearCanvas(ctx){
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
</script>
</head>
<body onload="draw('Click me!');">
<p>
<a href="index.html">Back to index</a>
</p>
<canvas id="canvas" width="300" height="200" tabindex='0' class="default">
This browser or document mode doesn't support canvas
</canvas>
<div id="text" class="feedback"></div>
</body>
</html>