forked from jboesch/Keystrokes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
316 lines (243 loc) · 9.91 KB
/
index.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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery','1.4.2');</script>
<script type="text/javascript" src="js/jquery.keystrokes.min.js"></script>
<title>Keystrokes</title>
<script type="text/javascript">
jQuery(function($){
// Add/modify event key codes to meet your own needs
// $.extend($.event.special.keystrokes.codes, { 133234 : 'my fake key' });
// Debugging to the console
$.event.special.keystrokes.debug = true;
//$.event.special.keystrokes.global.captureInputFields = true;
/*
$.event.special.keystrokes.global.customValidation = function(event, stack){
// 'this' refers to the element that is bound
// console.log(this, event, stack);
// Make sure we're not capturing keystrokes on an input
if($(event.target).not(':input').length){
alert('Your keystrokes validates successfully through the global custom validation!');
return true;
}
return false;
}
*/
// Basic setup
$(document).bind('keystrokes', {
keys: ['i', 'p']
}, function(event){
logger('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>');
});
// Basic setup with namespace
$(document).bind('keystrokes.SingleItem', {
keys: ['m', 'arrow down+r']
}, function(event){
// Unbind this event after it's been successfully typed
$(this).unbind(event.keystrokes.stack_item.name);
logger('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>. You cannot type it again because it has been unbound!');
});
// Advanced setup with namespace, multiple keystrokes and custom success callbacks for each one
$(document).bind('keystrokes.OtherNameSpace', [
{
// Define typed keys in sequence
keys: ['h', 'shift+p+o'],
// If false, this will not execute the main callback, only the "success" callback on this stack item
proceedToMainCallback: false,
// The callback bound to this specific stack item
success: function(event){
logger('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>. This has "proceedToMainCallback: false" so it will not call the main callback for this bound event.</em>');
}
},
{
// Define typed keys in sequence
keys: ['j', 'k'],
// The callback bound to this specific stack item
success: function(event){
logger('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>');
}
},
{
// Define typed keys in sequence
keys: ['arrow up+comma+k', 1, 2, 3],
// The callback bound to this specific stack item
success: function(event){
logger('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>');
}
}
// The main callback that gets called with every successful key sequence
// This can be skipped by setting 'proceedToMainCallback: false' as an option in a stack item
], function(event){
// Maybe get the whole stack.. if you want?
var stack = event.keystrokes.stack;
// Get the specific stack item that was successfully typed
var data_keys = event.keystrokes.stack_item.keys.join(', ');
logger('<span>This is the main callback for selected successful keystrokes. To skip this call, just set "proceedToMainCallback: false" in your stack item: </span> ' + data_keys);
}
);
// Setup with custom validation
$(document).bind('keystrokes.CustomValidation', {
keys: ['c', 'v'],
customValidation: function(event, stack){
// 'this' refers to the element that is bound
// console.log(this, event, stack);
// You can check $(event.target) here to make sure it's something specific
return true;
}
}, function(event){
logger('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>');
});
// Set it up on the input
$('input').bind('keystrokes', { keys: ['i','n'] }, function(event){
logger('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em> on the input. Now it\'s unbound! No more typing it for you.');
$(this).unbind(event.keystrokes.stack_item.name);
});
// Specific to this example, log everything to a little log box
function logger(str){
var log_box = $('#log-box');
log_box.append('<div class="typed">' + str + '</div>');
log_box.attr('scrollTop', log_box.attr('scrollHeight'));
}
});
</script>
<style type="text/css">
.typed {
background:#eee;
padding:5px;
border-bottom:1px solid #ccc;
font-size:14px;
}
.typed em {
font-weight:bold;
}
.typed span {
color:green;
}
#log-box {
height:400px;
width:25%;
overflow:scroll;
border:1px solid #ccc;
position:fixed;
top:10px;
}
h3 {
padding:10px;
margin:0;
background:#666;
color:#fff;
}
#info-box {
padding:0 0 0 30%;
width:60%;
}
pre {
background:#FBFFCF;
padding:10px;
overflow:scroll;
}
</style>
</head>
<body>
<div id="log-box">
<h3>Log Box</h3>
</div>
<div id="info-box">
<h3>Examples</h3>
<p>All keys strokes you make that are successful will be logged into the log box on the side. Debugging is enabled so if you have Firebug you can open up the console and see the keys you are typing.</p>
<h4>Example #1 - Basic</h4>
<p>This is the most basic usage. Specify the keys in an array and run the callback on success.</p>
<pre>
$(document).bind('keystrokes', {
keys: ['i', 'p']
}, function(event){
logger('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>');
});
</pre>
<h4>Example #2 - Basic</h4>
<p>This is an example using a namespace on the event. Once the specified keys are successfully typed, it will run the callback and unbind the event.</p>
<pre>
$(document).bind('keystrokes.SingleItem', {
keys: ['m', 'arrow down+r']
}, function(event){
// Unbind this event after it's been successfully typed
$(this).unbind(event.keystrokes.stack_item.name);
logger('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>. You cannot type it again because it has been unbound!');
});
</pre>
<h4>Example #3 - Advanced</h4>
<p>In this example you can pass in an array of key sets as data. You can also specify a "success" callback for each key set. The main callback at the end gets called whenever you successfully complete any one of the key combinations in the array stack. You can avoid the main callback from being called by adding 'proceedToMainCallback: false' to the key set.</p>
<pre>
$(document).bind('keystrokes.OtherNameSpace', [
{
// Define typed keys in sequence
keys: ['h', 'shift+p+o'],
// If false, this will not execute the main callback, only the "success" callback on this stack item
proceedToMainCallback: false,
// The callback bound to this specific stack item
success: function(event){
logger('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>. This has "proceedToMainCallback: false" so it will not call the main callback for this bound event.</em>');
}
},
{
// Define typed keys in sequence
keys: ['j', 'k'],
// The callback bound to this specific stack item
success: function(event){
logger('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>');
}
},
{
// Define typed keys in sequence
keys: ['arrow up+comma+k', 1, 2, 3],
// The callback bound to this specific stack item
success: function(event){
logger('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>');
}
}
// The main callback that gets called with every successful key sequence
// This can be skipped by setting 'proceedToMainCallback: false' as an option in a stack item
], function(event){
// Maybe get the whole stack.. if you want?
var stack = event.keystrokes.stack;
// Get the specific stackee item that was successfully typed
var data_keys = event.keystrokes.stack_item.keys.join(', ');
logger('<span>This is the main callback for selected successful keystrokes. To skip this call, just set "proceedToMainCallback: false" in your stack item: </span> ' + data_keys);
}
);
</pre>
<h4>Example #4 - Custom Validation</h4>
<p>You can write a custom validation method where you call the shots! This can be used for checking $(event.target).is('iframe') or whatever you want. Return <em>true</em> if your check passes and <em>false</em> if it doesn't.</p>
<!--
Input: <input type="text" id="myinput" />
Textarea: <textarea id="mytext"></textarea>
-->
<pre>
// Setup with custom validation
$(document).bind('keystrokes.CustomValidation', {
keys: ['c', 'v'],
customValidation: function(event, stack){
// 'this' refers to the element that is bound
// console.log(this, event, stack);
// You can check $(event.target) here to make sure it's something specific
return true;
}
}, function(event){
logger('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em>');
});
</pre>
<h4>Example #5 - Attaching to inputs</h4>
<p>By default, it will not pickup keys typed in an input/textarea UNLESS you bind them directly to an input/textarea and are focused on the input.</p>
<pre>
// Set it up on the input
$('input').bind('keystrokes', { keys: ['i','n'] }, function(event){
logger('You typed : <em>' + event.keystrokes.stack_item.keys.join(', ') + '</em> on the input. Now it\'s unbound! No more typing it for you.');
$(this).unbind(event.keystrokes.stack_item.name);
});
</pre>
<input type="text" name="hi" />
</div>
</body>
</html>