Keyboard controls for an international user base

Slide 1

INTERNATIONAL KEYBOARD CONTROLS FOR A N USER BASE Manuel Matuzovi ć

   @mmatuzo

ViennaJS 05/2017

Slide 2

Manuel Matuzovic

Slide 3

Manuel Matuzovi ć

Slide 4

č , ć , đ , d ž , š , ž , nj, lj q , w,

Slide 5

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

Slide 6

QWERTY

Slide 7

QWERTZ

Slide 8

AZERTY

Slide 9

JCUKEN

Slide 10

Soooo?

Slide 11

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

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.

Slide 13

event.keyCode window . addEventListener ( 'keydown' ,

navigate );

function

navigate ( e ) {

...

( e . keyCode

===

68 ) {

moveLeftAndRight ( 1 );

}

( e . keyCode

===

90 ) {

shootMissile ();

}

Slide 14

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 16

QWERTY QWERT Z

Slide 17

QWERTY

Slide 18

Remember AZERTY?

Slide 19

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

Reference keyboard

Slide 21

window . addEventListener ( 'keydown' ,

navigate );

function

navigate ( e ) {

...

( e . code

===

'KeyD' ) {

moveLeftAndRight ( 1 );

}

( e . code

===

'KeyY' ) {

shootMissile ();

}

event.keyCode

Slide 22

Slide 23

Browsersupport

Slide 24

Browsersupport

Slide 25

switch (e.code || e.key || e.keyCode ) {

...

case

'KeyD' :

case

'ArrowRight' : case

39 :

moveLeftAndRight ( 1 );   ...

}

Fallback

Slide 26

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 ).