A presentation at ViennaJS in in Vienna, Austria by Manuel Matuzovic
INTERNATIONAL KEYBOARD CONTROLS FOR A N USER BASE Manuel Matuzovi ć
@mmatuzo
ViennaJS 05/2017
Manuel Matuzovic
Manuel Matuzovi ć
č , ć , đ , d ž , š , ž , nj, lj q , w,
x
K eyboard layout s “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
QWERTY
QWERTZ
AZERTY
JCUKEN
Soooo?
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
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 a
ribute is used only by the keypress event.
event.keyCode window . addEventListener ( 'keydown' ,
navigate );
function
navigate ( e ) {
...
if
( e . keyCode
===
68 ) {
moveLeftAndRight ( 1 );
}
if
( e . keyCode
===
90 ) {
shootMissile ();
}
}
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
QWERTY QWERT Z
QWERTY
Remember AZERTY?
UI Events: API • Two new properties: key and code • event.key
• Reference keyboard in the specification
Reference keyboard
window . addEventListener ( 'keydown' ,
navigate );
function
navigate ( e ) {
...
if
( e . code
===
'KeyD' ) {
moveLeftAndRight ( 1 );
}
if
( e . code
===
'KeyY' ) {
shootMissile ();
}
}
event.keyCode
Browsersupport
Browsersupport
switch (e.code || e.key || e.keyCode ) {
...
case
'KeyD' :
case
'ArrowRight' : case
39 :
moveLeftAndRight ( 1 ); ...
}
Fallback
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
).
https://codepen.io/matuzo/pen/PmgWRm?editors=0010
T WEETABLE TAKE-AWAY The web is international and so are your users. Don’t assume that all users use the same input devices.
THANK YOU medium.com /@matuzo codepen.io/matuzo
manuel@matuzo.at
meetup.com/webclerks Manuel Matuzovi ć
@mmatuzo
ViennaJS 05/2017
JUNE 27TH 18:30 SEKTOR5 SHOW & TELL MEETUP
Images • h
p://www.daniel.at/images/pictures/_DSF2655.jpg
• h
ps://en.wikipedia.org/wiki/QWERTZ#/media/File:KB_Germany.svg
• h
ps://en.wikipedia.org/wiki/QWERTY#/media/File:KB_Intl_English_Mac_- Apple_Keyboard(MC184Z).svg
• h
ps://upload.wikimedia.org/wikipedia/commons/4/41/Belgian_pc_keyboard.svg
• h
ps://upload.wikimedia.org/wikipedia/commons/6/60/KB_Russian.svg
The UI Events specification comes with two new properties for keyboard events: key and code. They replace the previously existing (and still existing) charCode, keyCode, and which. It’s not just easier to work with keyboard events but it also improves accessibility significantly. Manuel will introduce the new API and illustrate why and how it’s important to an international user base.
The following resources were mentioned during the presentation or are useful additional information.
https://hacks.mozilla.org/2017/03/internationalize-your-keyboard-controls/ https://caniuse.com/#feat=keyboardevent-code https://caniuse.com/#feat=keyboardevent-key https://codepen.io/matuzo/pen/PmgWRm?editors=0010
https://www.meetup.com/de-DE/webclerks/
for free. You
can too.