Sprites.Keyboard

The keyboard as reactive values. Pressed keeps a value you pass true while a key is down and false while it is up, through a shared driver, so a lens on it follows the press and other values derive from it. It is the keyboard companion to Sprites.Browser. A keydown while a form control is focused is left alone, so a space typed into a field is not stolen; otherwise the matched keydown is prevented, so the key acts as a pure modifier rather than scrolling the page or pressing a focused button. A blur releases every key, so a key held as the window loses focus does not stick down.

Sprites.Keyboard

Sprites.Keyboard.Pressed.Code Void

Sprites.Keyboard.Pressed.Code(held, code)

Keep held following one key by its KeyboardEvent code: true while the key is down and false while it is up. It does not return the state; it updates the value you pass, through a shared driver, as the key is pressed and released. The named helpers below call it with a code.

InputTypeDescription
heldSprites.Reactive.ValueThe value written true while the key is down, false while it is up.
codeStringA KeyboardEvent code, such as 'Space' or 'ArrowLeft'.

Returns nothing; it writes the held value as the key is pressed and released.

const held = Sprites.Reactive.Value(false);
Sprites.Keyboard.Pressed.Code(held, 'Space');
Sprites.Ui.Dom.Text('space held = ', held);
Click the preview, then hold the space bar: the value reads true while it is down.

Sprites.Keyboard.Pressed.Space Void

Sprites.Keyboard.Pressed.Space(held)

Keep held following the space bar. Calls Pressed.Code with the code 'Space'. The editors use it for a temporary pan: while space is held, a drag pans the canvas whatever tool is selected.

InputTypeDescription
heldSprites.Reactive.ValueThe value written true while space is down, false while it is up.

Returns nothing.

Sprites.Keyboard.Pressed.Up Void

Sprites.Keyboard.Pressed.Up(held)

Keep held following the up arrow. Calls Pressed.Code with the code 'ArrowUp'.

InputTypeDescription
heldSprites.Reactive.ValueThe value written true while the up arrow is down, false while it is up.

Returns nothing.

Sprites.Keyboard.Pressed.Down Void

Sprites.Keyboard.Pressed.Down(held)

Keep held following the down arrow. Calls Pressed.Code with the code 'ArrowDown'.

InputTypeDescription
heldSprites.Reactive.ValueThe value written true while the down arrow is down, false while it is up.

Returns nothing.

Sprites.Keyboard.Pressed.Left Void

Sprites.Keyboard.Pressed.Left(held)

Keep held following the left arrow. Calls Pressed.Code with the code 'ArrowLeft'.

InputTypeDescription
heldSprites.Reactive.ValueThe value written true while the left arrow is down, false while it is up.

Returns nothing.

Sprites.Keyboard.Pressed.Right Void

Sprites.Keyboard.Pressed.Right(held)

Keep held following the right arrow. Calls Pressed.Code with the code 'ArrowRight'.

InputTypeDescription
heldSprites.Reactive.ValueThe value written true while the right arrow is down, false while it is up.

Returns nothing.

Sprites.Keyboard.Pressed.Shift Void

Sprites.Keyboard.Pressed.Shift(held)

Keep held following either shift key. Shift reports two codes, so it calls Pressed.Code for both 'ShiftLeft' and 'ShiftRight' against the one held value, so it reads down while either is down.

InputTypeDescription
heldSprites.Reactive.ValueThe value written true while a shift key is down, false while it is up.

Returns nothing.

Sprites.Keyboard.Typed Void

Sprites.Keyboard.Typed(typed)

Keep typed following every keydown. Pass a reactive value with an onChange lens, and each press Sets it a fresh { key, code, seq } for the lens to read and act on, where key is the character or key name, code the physical key, and seq a counter that rises every press so two presses of the same key are two distinct values a lens follows. A keydown while a form control is focused is left alone, so a digit typed into a number field is not stolen; otherwise the keydown is prevented, so an arrow or a space moves the caret rather than scrolling the page. Mount it inside an If so it only listens while the tool that reads it is active.

InputTypeDescription
typedSprites.Reactive.ValueA value with an onChange lens; each press Sets it a fresh { key, code, seq } for the lens to read and act on.

Returns nothing; it writes the typed value on every keydown while it is mounted.

const last = Sprites.Reactive.Value('none');
const typed = Sprites.Reactive.Reverse((event) => {
  Sprites.Reactive.Set(last, event.key);
});
Sprites.Keyboard.Typed(typed);
Sprites.Ui.Dom.Text('last key = ', last);
Click the preview, then type: the lens reads each press and shows the last key.