INTERNATIONAL
KEYBOARD CONTROLS
FOR AN
USER BASE
Manuel Matuzović
@mmatuzo
ViennaJS 05/2017
Slide 2
Slide 2 text
Manuel Matuzovic
Slide 3
Slide 3 text
Manuel Matuzović
Slide 4
Slide 4 text
č, ć, đ, dž, š, ž, nj, lj
q, w, x
Slide 5
Slide 5 text
Keyboard layouts
“A keyboard layout is any specific mechanical,
visual, or functional arrangement of the keys,
legends, or key-meaning associations
(respectively) of a computer, typewriter, or
other typographic keyboard.”
Wikipedia
Slide 6
Slide 6 text
QWERTY
Slide 7
Slide 7 text
QWERTZ
Slide 8
Slide 8 text
AZERTY
Slide 9
Slide 9 text
JCUKEN
Slide 10
Slide 10 text
Soooo?
Slide 11
Slide 11 text
Events
• keydown
The keydown event is fired when a key is pressed down.
• keyup
The keyup event is fired when a key is released.
• keypress
The keypress event is fired when a key is pressed down
Slide 12
Slide 12 text
Values
• keyCode
Returns a numerical code identifying the value of the pressed key.
• which
Returns a numeric code identifying the value of the pressed key; this is
usually the same as keyCode.
• charCode
Returns a Number representing the Unicode reference number of the
key; this attribute is used only by the keypress event.
Slide 13
Slide 13 text
event.keyCode
window.addEventListener('keydown', navigate);
function navigate(e) {
...
if (e.keyCode === 68) {
moveLeftAndRight(1);
}
if (e.keyCode === 90) {
shootMissile();
}
}
Slide 14
Slide 14 text
Issues
• Different meaning of properties when handling a key event (keydown
or keyup) versus a character event (keypress).
• The values of keys in keypress events are different between browsers.
• Inconsistent values for keys and events cross-browser
• keyCode on key events tries to be international-friendly, but isn’t
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
QWERTY
QWERTZ
Slide 17
Slide 17 text
QWERTY
Slide 18
Slide 18 text
Remember AZERTY?
Slide 19
Slide 19 text
UI Events: API
• Two new properties: key and code
• event.key - printable character or a descriptive string, e.g. z
• event.code - physical key, e.g. KeyY
• Reference keyboard in the specification
Slide 20
Slide 20 text
Reference keyboard
Slide 21
Slide 21 text
window.addEventListener('keydown', navigate);
function navigate(e) {
...
if (e.code === 'KeyD') {
moveLeftAndRight(1);
}
if (e.code === 'KeyY') {
shootMissile();
}
}
event.keyCode
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Browsersupport
Slide 24
Slide 24 text
Browsersupport
Slide 25
Slide 25 text
switch(e.code || e.key || e.keyCode ) {
...
case 'KeyD':
case 'ArrowRight':
case 39:
moveLeftAndRight(1);
...
}
Fallback
Slide 26
Slide 26 text
Notes
• There is no way of checking for the current keyboard layout.
• Use the repeat property to check if the user keeps pressing a key
and the event is sent repeatedly
• Boolean properties for modifier keys (altKey, ctrlKey, metaKey,
shiftKey).
Slide 27
Slide 27 text
https://codepen.io/matuzo/pen/PmgWRm?editors=0010
Slide 28
Slide 28 text
TWEETABLE TAKE-AWAY
The web is international and so are your users.
Don’t assume that all users use the same input
devices.
Slide 29
Slide 29 text
THANK YOU
medium.com/@matuzo
codepen.io/matuzo
[email protected]
meetup.com/webclerks
Manuel Matuzović
@mmatuzo
ViennaJS 05/2017