CodeAPI

KeyboardEvent

Event that is fired when the keyboard is pressed.

A KeyboardEvent event occurs when the user presses a key while the cursor is located inside a TextInput or TextBox.

Table of Contents

PROPERTIES

?
Store values associated with an object.
altKeyIndicates if the Option key on a Mac or Alt key on a PC was pressed.
contextGets the context of the event on a repeated element.
ctrlKeyIndicates if the Control (Ctrl) key was pressed.
keyGets the character that was pressed.
metaKey

Indicates if the ⌘ Command key on a Mac or ⊞ Windows key on a PC was pressed.

shiftKeyIndicates if the Shift key was pressed.
targetGets the element that the event was fired on.
typeGets the type of event that was fired.

MIXES IN

?
Where some functionality is inherited from.
$w.Event

altKey

Indicates if the Option key on a Mac or Alt key on a PC was pressed.

Syntax

get altKey(): boolean
TYPE
?
The kind of data the property stores.
boolean

Examples

Get the keyboard event's altKey property

$w("#myElement").onKeyPress( (event) => {
  let alt = event.altKey;  // false
} );

Get all of the keyboard event's properties

This example gets the properties of a keyboard event fired when the Shift and a keys were pressed.

$w("#myElement").onKeyPress( (event) => {
  let key  = event.key;                 // "A"
  let shift = event.shiftKey;           // true
  let meta = event.metaKey;             // false
  let alt = event.altKey;               // false
  let ctrl = event.ctrlKey;             // false
  let value = event.newValue;           // "SEA"
} );

context

Gets the context of the event on a repeated element.

Description

An event's context contains information about the circumstances surrounding the firing of the event. The context property only appears in events on repeated elements.

You can use the evnet context with $w.at() to get a selector function which selects items from a specific repeater item. It contains an object with one key:value pair. The key is "itemId" and the value is the ID of the repeated item on which the event occurred.

Syntax

get context(): EventContext

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Event

Examples

Get the context of the event

// non-repeater event

$w("#myElement").onEvent( (event) => {
  let type = event.context.type; // "GLOBAL_SCOPE"
} );


// repeater event

$w("#myRepeatedElement").onEvent( (event) => {
  let $item = $w.at(event.context)
  $item("#anotherRepeatedElement").value = "new value";

  let itemId = event.context.itemId;  // "item1"
} );

ctrlKey

Indicates if the Control (Ctrl) key was pressed.

Syntax

get ctrlKey(): boolean
TYPE
?
The kind of data the property stores.
boolean

Examples

Get the keyboard event's ctrlKey property

$w("#myElement").onKeyPress( (event) => {
  let ctrl = event.ctrlKey;  // false
} );

Get all of the keyboard event's properties

This example gets the properties of a keyboard event fired when the Shift and a keys were pressed.

$w("#myElement").onKeyPress( (event) => {
  let key  = event.key;                 // "A"
  let shift = event.shiftKey;           // true
  let meta = event.metaKey;             // false
  let alt = event.altKey;               // false
  let ctrl = event.ctrlKey;             // false
  let value = event.newValue;           // "SEA"
} );

key

Gets the character that was pressed.

Description

The key property gets a Unicode character string containing the printable representation of the key that was pressed. This does not necessarily correspond to what is printed on the physical key since the user could have changed the keyboard layout.

For keys that have no printable representation, a string indicating the key's purpose is returned. Some examples are "Enter", "Escape", and "Tab".

If more than one key is pressed and the combination includes a modifier that results in printing keystroke, the key property gets the modified printable character. For example, if the combination Shift+A is pressed, key gets "A".

However, if more than one key is pressed and the combination includes a modifier that results in a non-printing keystroke, the key property gets the unmodified printable character. For example, if the non-printing combination Ctrl+A is pressed, key gets the letter "a".

Syntax

get key(): string
TYPE
?
The kind of data the property stores.
string

Examples

Get the keyboard event's key property

$w("#myElement").onKeyPress( (event) => {
  let key = event.key;  // "A"
} );

Get all of the keyboard event's properties

This example get the properties of a keyboard event fired when the Shift and a keys were pressed.

$w("#myElement").onKeyPress( (event) => {
  let key  = event.key;                 // "A"
  let shift = event.shiftKey;           // true
  let meta = event.metaKey;             // false
  let alt = event.altKey;               // false
  let ctrl = event.ctrlKey;             // false
  let value = event.newValue;           // "SEA"
} );

metaKey

Indicates if the ⌘ Command key on a Mac or ⊞ Windows key on a PC was pressed.

Syntax

get metaKey(): boolean
TYPE
?
The kind of data the property stores.
boolean

Examples

Get the keyboard event's metaKey property

$w("#myElement").onKeyPress( (event) => {
  let meta = event.metaKey;  // false
} );

Get all of the keyboard event's properties

This example gets the properties of a keyboard event fired when the Shift and a keys were pressed.

$w("#myElement").onKeyPress( (event) => {
  let key  = event.key;                 // "A"
  let shift = event.shiftKey;           // true
  let meta = event.metaKey;             // false
  let alt = event.altKey;               // false
  let ctrl = event.ctrlKey;             // false
  let value = event.newValue;           // "SEA"
} );

shiftKey

Indicates if the Shift key was pressed.

Syntax

get shiftKey(): boolean
TYPE
?
The kind of data the property stores.
boolean

Examples

Get the keyboard event's shiftKey property

$w("#myElement").onKeyPress( (event) => {
  let shift = event.shiftKey;  // true
} );

Get all of the keyboard event's properties

This example gets the properties of a keyboard event fired when the Shift and a keys were pressed.

$w("#myElement").onKeyPress( (event) => {
  let key  = event.key;                 // "A"
  let shift = event.shiftKey;           // true
  let meta = event.metaKey;             // false
  let alt = event.altKey;               // false
  let ctrl = event.ctrlKey;             // false
  let value = event.newValue;           // "SEA"
} );

target

Gets the element that the event was fired on.

Note

When using the target to get the value of a text input or text box in an onKeyPress event handler, you may receive the value of the element before the key was pressed. To get the text input or text box's updated value, use the updatedTargetValue property of the event handler's event parameter.

Syntax

get target(): Element
TYPE
?
The kind of data the property stores.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Event

Examples

Get the ID of the target element

$w("#myElement").onEvent( (event) => {
  let targetId = event.target.id;  // "myElement"
} );

type

Gets the type of event that was fired.

Syntax

get type(): string
TYPE
?
The kind of data the property stores.
string

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Event

Examples

Get the type of the event

$w("#myElement").onEvent( (event) => {
  let eventType = event.type; // "click"
} );