-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathtrap.html
47 lines (46 loc) · 1.27 KB
/
trap.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv=Content-Type content="text/html; charset=macintosh">
<title>Keyboard trap</title>
<script src="./bower_components/jquery/jquery.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<label>
Nice lookahead search field
<input type="text" name="lookahead" id="lookahead" />
</label>
<div id="suggestions">
</div>
<form>
<p>
See whether you can get past the above input field using the keyboard alone... Cannot? this is because the implementation of a lookahead is not doing the correct thing.
</p>
<div id="chosen">
<label>
You want to be here
<input type="text" name="name" id="name" />
</label>
</div>
</form>
<script>
jQuery(document).ready(function () {
jQuery('#lookahead').on('keydown', function (e) {
var keyCode = e.which;
if (keyCode != 8) {
var character = String.fromCharCode(keyCode).toLowerCase();
var value = jQuery(this).val() + character || '';
jQuery('#suggestions').empty().append(jQuery('<p> Stuff that begins with: ')
.text(value)
);
jQuery(this).val(value);
e.preventDefault();
}
});
});
</script>
</body>
</html>