forked from Mottie/Keyboard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
navigate.html
140 lines (115 loc) · 4.89 KB
/
navigate.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Virtual Keyboard Navigation Demo</title>
<!-- demo -->
<link href="demo/demo.css" type="text/css" rel="stylesheet">
<!-- jQuery & jQuery UI + theme (required) -->
<link href="http://code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
<!-- keyboard widget css & script (required) -->
<link rel="stylesheet" href="css/keyboard.css">
<script src="js/jquery.keyboard.js"></script>
<!-- keyboard extensions (optional) -->
<script src="js/jquery.mousewheel.js"></script>
<!-- <script src="js/jquery.keyboard.extension-typing.js"></script> -->
<!-- <script src="js/jquery.keyboard.extension-autocomplete.js"></script> -->
<script src="js/jquery.keyboard.extension-navigation.js"></script>
<style>
/* Add this css so we can see when the action (orange) keys are highlighted */
.ui-keyboard-button.ui-state-active.ui-state-hover {
border: 1px solid #fff;
-moz-box-shadow: 1px 1em 1px #ffba2b inset;
-webkit-box-shadow: 1px 1em 1px #ffba2b inset;
box-shadow: 1px 1em 1px #ffba2b inset;
}
/* Class added to indicate the virtual keyboard has navigation focus */
.hasFocus { border-color: #59b4d4; }
</style>
<!-- initialize keyboard (required) -->
<script>
$(function(){
// change default navigation keys
$.extend($.keyboard.navigationKeys, {
toggle : 112, // toggle key; F1 = 112 (event.which value for function 1 key)
enter : 13, // Enter
pageup : 33, // PageUp key
pagedown : 34, // PageDown key
end : 35, // End key
home : 36, // Home key
left : 37, // Left arrow key
up : 38, // Up arrow key
right : 39, // Right arrow key
down : 40, // Down arrow key
caretRt : 45, // Insert key
caretLt : 46 // delete key
});
// External trigger using any of the $.keyboard.navigationKeys keys (key:value)
// no need to toggle first
// $('#keyboard').trigger('navigate', 'home');
// or, navigate to a specific key [ row, index ] (both use zero-based indexes)
// $('#keyboard').trigger('navigateTo', [2,3]);
// mini navigation block
$('#info button').click(function(){
$('textarea').trigger('navigate', this.className);
});
$('#keyboard')
.keyboard({
alwaysOpen: true
})
.addNavigation({
position : [0,0], // set start position [row-number, key-index]
toggleMode : false, // true = navigate the virtual keyboard, false = navigate in input/textarea
focusClass : 'hasFocus' // css class added when toggle mode is on
});
});
</script>
</head>
<body>
<!-- Links to other demo pages & docs -->
<div id="nav">
<a href="index.html">Main Demo</a>
<a href="basic.html">Basic</a>
<a href="mobile.html">Mobile</a>
<a href="layouts.html">Layouts</a>
<a href="scramble.html">Scramble</a>
<a class="current" href="navigate.html">Navigate</a>
<a href="calculator.html">Calculator</a>
<a class="play" href="http://jsfiddle.net/Mottie/MK947/">Playground</a>
<a class="git" href="https://github.com/Mottie/Keyboard/wiki">Documentation</a>
<a class="git" href="https://github.com/Mottie/Keyboard/archive/master.zip">Download</a>
<a class="issue" href="https://github.com/Mottie/Keyboard/issues">Issues</a><br><br>
</div>
<!-- End Links -->
<h1><a href="https://github.com/Mottie/Keyboard">Virtual Keyboard Navigate Demo</a></h1>
<h4>Note: Navigation inside of the input/textarea is <strong>disabled</strong>. This includes the <span class="underline">autocomplete</span> extension navigation.</h4>
<div id="wrap"> <!-- wrapper only needed to center the input -->
<!-- keyboard input -->
<textarea id="keyboard"></textarea>
</div> <!-- End wrapper -->
<div id="info">
<ul>
<li>Shift-F1 - Toggle navigation (textarea and keyboard).</li>
<li>Left - Move one key left.</li>
<li>Right - Move one key right.</li>
<li>Up - Move up one row.</li>
<li>Down - Move down one row.</li>
<li>Home - Move to the first key in the row.</li>
<li>End - Move to the last key in the row.</li>
<li>Page Up - Move to the first row.</li>
<li>Page Down - Move to the last row.</li>
<li>Enter - Add the highlighted key.</li>
<li>Insert - Move caret right.</li>
<li>Delete - Move caret left.</li>
</ul>
<div class="nav">
<button class="home">Home</button><button class="up">Up</button><button class="pageUp">PageUp</button><br>
<button class="left">Left</button><button class="toggle">Toggle</button><button class="right">Right</button><br>
<button class="end">End</button><button class="down">Down</button><button class="pageDown">PageDown</button><br>
<button class="caretLt">Caret Left</button><button class="enter">Enter</button><button class="caretRt">Caret Right</button>
</div>
</div>
</body>
</html>