key()

Runs actions on keydown while focus is on or inside the element.

Syntax

key(<key>, <action>#)

registry syntax: key([ctrl+|shift+|alt+|meta+]Key, action, ...)

Parameters

keyEscape, ArrowRight, ctrl+k, shift+Tab …required

A key name, optionally with modifiers. Modifiers must match exactly.

actions<action>#one or more

Actions to run.

Effect

A trigger for on:.

Example

.menu {  --open: state(false);}.menu > button:on(click) {  --open: toggle();}/* A click anywhere else, or Escape, closes it. */.menu:on(outside(click)) {  --open: set(false);}.menu:on(keydown(Escape)) {  --open: set(false);}.menu ul {  display: none;}.menu ul:when(--open) {  display: block;}

Behavior

• 0.9. The new form is .dialog:on(keydown(Escape)) { --open: set(false); }, and keyup(Escape) exists there too. key() in on: keeps working in 0.9.
• When nothing is focused, the element last pressed with the pointer receives keys.
• Character keys never fire while typing in a field.
• To stop the key's native default, such as scrolling on an arrow key, add prevent() to the action list: key(ArrowDown, prevent(), increment(--n)).

Supported contexts

• Inside on:.

Limitations

• Doesn’t prevent the key’s default action unless prevent() is in the action list.

Examples

• Draggable card · API examples, runs the real runtime
• Keyboard playground · Test lab, runs the real runtime

Related