This repository has been archived by the owner on Jun 1, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
02.html
316 lines (302 loc) · 13.9 KB
/
02.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
---
layout: demo-step
title: Demo step 02
---
<section>
<details>
<summary>
Explanation
</summary>
<h2>
Explanation
</h2>
<p>
Some fields in this form are prefilled with sensible defaults, other are just not as common to fill in (ie "empty" is a sensible default). These fields are skipped when the user navigates the fields using the
<kbd>tab</kbd>
key. To reach the normally skipped fields using keyboard navigation, just
<kbd>tab</kbd>
past them and
<kbd>shift</kbd>-
<kbd>tab</kbd>
back. Mouse or touch navigation is unaffected.
</p>
<p>
Skipping fields is most useful when the users are familiar with the form, and uses it regularly. Casual users may not feel as comfortable - then again, if they are already using the
<kbd>tab</kbd>
button, they might see it as an optimization.
</p>
<p>
Both static html fields and dynamically added fields are skipped in this example. The static html fields have, or are contained within elements that have, the attribute
<code>data-skip-on-tab="true"</code>. The dynamically added fields are children of a container that is marked to be skipped, so explicitly enabling skipping is not necessary.
</p>
</details>
</section>
<section>
<h2>
Register phone order into order administration system
</h2>
<p>
This
<span class="explanation">annotated example form</span>
is used only by sales staff. They enter order details received by phone all day long, which is why they don't want to
<kbd>tab</kbd>
through all fields every time.
</p>
<form action="about:blank" method="POST">
<fieldset>
<legend>Customer contact information</legend>
<label for="phone">
Phone number
</label>
<input id="phone" name="phone" type="tel" required="required" autofocus="true" placeholder="(###) ###-####" title="The customer's phone number is required." data-h5-errorid="invalid-phone" />
<span id="invalid-phone" class="field-validation-feedback"></span>
<span class="explanation">Input always starts here</span>
</fieldset>
<fieldset data-skip-on-tab="true" data-plus-as-tab="true">
<legend>Products</legend>
<span class="explanation">This entire section can usually be left with default values, so it is skipped when tabbing.</span>
<span class="explanation">If a new row is added, the numpad plus key or the enter key can be used to skip to the next field.</span>
<table id="products">
<thead>
<tr>
<th scope="col">
Row
</th>
<th scope="col">
Product
</th>
<th scope="col">
Quantity
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
0
</td>
<td>
<input id="productId-0" name="productId-0" type="number" min="0" step="1" value="1234" required="required" />
</td>
<td>
<input id="quantityId-0" name="quantityId-0" type="number" min="0" step="1" value="1" required="required" />
</td>
<td>
Basic product, nothing extra
</td>
</tr>
<tr>
<td>
1
</td>
<td>
<input id="productId-1" name="productId-1" type="number" min="0" step="1" value="5678" required="required" />
</td>
<td>
<input id="quantityId-1" name="quantityId-1" type="number" min="0" step="1" value="1" required="required" />
</td>
<td>
Product insurance
</td>
</tr>
</tbody>
</table>
<button id="add" type="button" data-plus-as-tab="false">
Add another product type
</button>
<span class="explanation">Dynamically adds a field that is usually skipped, but running
<code>.focus()</code>to enable faster edits.</span>
<p>
<span class="explanation">Even though this button is in a container with
<code>data-plus-as-tab="true"</code>, and enter is a tab key, the enter key is made to work on the button by setting
<code>data-plus-as-tab="false"</code>.</span>
</p>
</fieldset>
<fieldset>
<legend>Invoice address</legend>
<label for="invoice-name">
Name
</label>
<input id="invoice-name" name="invoice-name" type="text" required="required" />
<label for="invoice-address1">
Address line 1
</label>
<input id="invoice-address1" name="invoice-address1" type="text" required="required" />
<label for="invoice-address2">
Address line 2
<small>(optional)</small>
</label>
<input id="invoice-address2" name="invoice-address2" type="text" data-skip-on-tab="true" />
<small>(optional)</small>
<span class="explanation">Since the second address line is optional, it makes sense to skip it.</span>
<label for="invoice-zip">
Zip code
</label>
<input id="invoice-zip" name="invoice-zip" type="text" required="required" placeholder="A#A #A#" pattern="^([a-zA-Z]\d[a-zA-Z])\s*(\d[a-zA-Z]\d)$" title="Required. Use the standard Canadian H0H 0H0 format." data-h5-errorid="invalid-invoice-zip" />
<span id="invalid-invoice-zip" class="field-validation-feedback"></span>
<label for="invoice-city">
City
</label>
<input id="invoice-city" name="invoice-city" type="text" required="required" />
<span class="explanation">Most of the time, entering details ends here; just pressing
<kbd>enter</kbd>saves the order.</span>
<label for="invoice-state">
State/province
</label>
<select id="invoice-state" name="invoice-state" data-skip-on-tab="true" required="required">
{% include province-options.html %}
</select>
<span class="explanation">Orders are usually invoiced/delivered to Ontario, which is why the drop down list is skipped.</span>
</fieldset>
<fieldset data-has-follow-ups="">
<legend>Delivery address</legend>
<p>
Is the delivery address the same as the invoice address?
<span class="explanation">The delivery address is often the same as the invoice address, but not always. Selecting "no" shows new address fields as follow ups.</span>
</p>
<input id="invoice-delivery-address-same-0" name="invoice-delivery-address-same" type="radio" checked="checked" />
<label for="invoice-delivery-address-same-0">
Yes</label>
<input id="invoice-delivery-address-same-1" name="invoice-delivery-address-same" type="radio" data-has-follow-up="sibling" />
<label for="invoice-delivery-address-same-1">
No</label>
<div id="separate-delivery-address" data-is-follow-up="">
<label for="delivery-name">
Name
</label>
<input id="delivery-name" name="delivery-name" type="text" data-is-follow-up-required="required" />
<label for="delivery-address1">
Address line 1
</label>
<input id="delivery-address1" name="delivery-address1" type="text" data-is-follow-up-required="required" />
<label for="delivery-address2">
Address line 2
<small>(optional)</small>
</label>
<input id="delivery-address2" name="delivery-address2" type="text" data-skip-on-tab="true" />
<small>(optional)</small>
<span class="explanation">Since the second address line is optional, it makes sense to skip it.</span>
<label for="delivery-zip">
Zip code
</label>
<input id="delivery-zip" name="delivery-zip" type="text" data-is-follow-up-required="required" placeholder="A#A #A#" pattern="^([a-zA-Z]\d[a-zA-Z])\s*(\d[a-zA-Z]\d)$" title="Required. Use the standard Canadian H0H 0H0 format." data-h5-errorid="invalid-delivery-zip" />
<span id="invalid-delivery-zip" class="field-validation-feedback"></span>
<label for="delivery-city">
City
</label>
<input id="delivery-city" name="delivery-city" type="text" data-is-follow-up-required="required" />
<span class="explanation">Most of the time, entering details ends here; just pressing
<kbd>enter</kbd>saves the order.</span>
<label for="delivery-state">
State/province
</label>
<select id="delivery-state" name="delivery-state" data-skip-on-tab="true" data-is-follow-up-required="required">
{% include province-options.html %}
</select>
<span class="explanation">Orders are usually invoiced/delivered to Toronto, which is why the drop down list is skipped.</span>
</div>
</fieldset>
<fieldset data-skip-on-tab="true">
<legend>Delivery options</legend>
<input id="giftwrap" name="giftwrap" type="checkbox" />
<label for="giftwrap">
Gift wrap</label>
<ol>
<li>
<input id="delivery-0" name="delivery" type="radio" checked="checked" />
<label for="delivery-0">
Normal delivery (5-6 days)</label>
</li>
<li>
<input id="delivery-1" name="delivery" type="radio" />
<label for="delivery-1">
Express delivery (2-3 days)</label>
</li>
<li>
<input id="delivery-2" name="delivery" type="radio" />
<label for="delivery-2">
Overnight delivery (1 day)</label>
</li>
</ol>
<span class="explanation">
<kbd>shift</kbd>-
<kbd>tab</kbd>to radio buttons work as usual.</span>
</fieldset>
<fieldset>
<legend>Internal information</legend>
<label for="notes">
Order notes
<small>(optional)</small>
</label>
<textarea id="notes" name="notes"></textarea>
<small>(optional)</small>
<span class="explanation">Notes are optional, but not skipped. It doesn't make sense to skip to the submit button when
<kbd>enter</kbd>can be used at some point before this textarea.
</span>
</fieldset>
<button type="submit">
Simulate save order and show alert box
</button>
</form>
</section>
<script src="../resources/javascript/jquery-1.10.2.js"></script>
<script src="../resources/javascript/ba-debug.min.js"></script>
<script>
//<![CDATA[
debug.setLevel(3);
//]]>
</script>
<script src="../resources/javascript/jquery.h5validate.js"></script>
<script src="../resources/javascript/emulatetab.joelpurra.js"></script>
<script src="../resources/javascript/skipontab.joelpurra.js"></script>
<script src="../resources/javascript/plusastab.joelpurra.js"></script>
<script src="../resources/javascript/followup.joelpurra.js"></script>
<script src="../resources/javascript/autocleancallback.joelpurra.js"></script>
<script src="../resources/javascript/autocleancallback.canada.joelpurra.js"></script>
<script>
//<![CDATA[
$(function() {
JoelPurra.PlusAsTab.setOptions({
// Enter, numpad plus
key: [13, 107]
});
$(".explanation").hide();
var $forms = $("form")
$forms
.h5Validate();
$("#add")
.click(addProductTableRow);
function numericalInput(idName) {
var $input = $("<input />", {
id: idName,
name: idName,
type: "number",
min: 0,
step: 1,
required: "required"
});
return $input;
}
function addProductTableRow() {
var $productsBody = $("#products tbody");
var productCounter = $productsBody.children("tr").length;
var productId = "amount-" + productCounter;
var quantityId = "quantity-" + productCounter;
$productsBody
.append($("<tr />")
.append($("<td />")
.html(productCounter))
.append($("<td />")
.append(numericalInput(productId)))
.append($("<td />")
.append(numericalInput(quantityId)
.val(1))));
// Skipping of the new element is implicit, since it is inside a container that
// is already marked for skipping with the data attribute
// Programmatically setting .focus() is not affected by SkipOnTab
$("#" + productId)
.focus();
}
});
//]]>
</script>