$w.KeyboardEvent

$w.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.

Mixes In

$w.Event

Contents

altKey Indicates if the Option key on a Mac or Alt key on a PC was pressed.
context Gets the context of the event on a repeated element.
ctrlKey Indicates if the Control (Ctrl) key was pressed.
key Gets the character that was pressed.
metaKey Indicates if the ⌘ Command key on a Mac or ⊞ Windows key on a PC was pressed.
shiftKey Indicates if the Shift key was pressed.
target Gets the element that the event was fired on.
type Gets the type of event that was fired.
altKey

altKey

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

Syntax

get altKey(): boolean

Type

Boolean

Examples

Get the keyboard event's altKey property

JHcoIiNteUVsZW1lbnQiKS5vbktleVByZXNzKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGFsdCA9IGV2ZW50LmFsdEtleTsgIC8vIGZhbHNlCn0gKTsK
$w("#myElement").onKeyPress( (event, $w) => {
  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.

JHcoIiNteUVsZW1lbnQiKS5vbktleVByZXNzKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGtleSAgPSBldmVudC5rZXk7ICAgICAgICAgICAgICAgICAvLyAiQSIKICBsZXQgc2hpZnQgPSBldmVudC5zaGlmdEtleTsgICAgICAgICAgIC8vIHRydWUKICBsZXQgbWV0YSA9IGV2ZW50Lm1ldGFLZXk7ICAgICAgICAgICAgIC8vIGZhbHNlCiAgbGV0IGFsdCA9IGV2ZW50LmFsdEtleTsgICAgICAgICAgICAgICAvLyBmYWxzZQogIGxldCBjdHJsID0gZXZlbnQuY3RybEtleTsgICAgICAgICAgICAgLy8gZmFsc2UKICBsZXQgdmFsdWUgPSBldmVudC5uZXdWYWx1ZTsgICAgICAgICAgIC8vICJTRUEiCn0gKTsK
$w("#myElement").onKeyPress( (event, $w) => {
  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

context

Gets the context of the event on a repeated element.

Syntax

get context(): Object

Description

The context property only appears in events on repeated elements.

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.

Type

Object

Examples

Get the context of the event

JHcoIiNteVJlcGVhdGVkRWxlbWVudCIpLm9uRXZlbnQoIChldmVudCwgJHcpID0+IHsKICBsZXQgaXRlbUlkID0gZXZlbnQuY29udGV4dC5pdGVtSWQ7ICAvLyAiaXRlbTEiCn0gKTsK
$w("#myRepeatedElement").onEvent( (event, $w) => {
  let itemId = event.context.itemId;  // "item1"
} );

Mixed In From

$w.Event

ctrlKey

ctrlKey

Indicates if the Control (Ctrl) key was pressed.

Syntax

get ctrlKey(): boolean

Type

Boolean

Examples

Get the keyboard event's ctrlKey property

JHcoIiNteUVsZW1lbnQiKS5vbktleVByZXNzKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGN0cmwgPSBldmVudC5jdHJsS2V5OyAgLy8gZmFsc2UKfSApOwo=
$w("#myElement").onKeyPress( (event, $w) => {
  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.

JHcoIiNteUVsZW1lbnQiKS5vbktleVByZXNzKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGtleSAgPSBldmVudC5rZXk7ICAgICAgICAgICAgICAgICAvLyAiQSIKICBsZXQgc2hpZnQgPSBldmVudC5zaGlmdEtleTsgICAgICAgICAgIC8vIHRydWUKICBsZXQgbWV0YSA9IGV2ZW50Lm1ldGFLZXk7ICAgICAgICAgICAgIC8vIGZhbHNlCiAgbGV0IGFsdCA9IGV2ZW50LmFsdEtleTsgICAgICAgICAgICAgICAvLyBmYWxzZQogIGxldCBjdHJsID0gZXZlbnQuY3RybEtleTsgICAgICAgICAgICAgLy8gZmFsc2UKICBsZXQgdmFsdWUgPSBldmVudC5uZXdWYWx1ZTsgICAgICAgICAgIC8vICJTRUEiCn0gKTsK
$w("#myElement").onKeyPress( (event, $w) => {
  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

key

Gets the character that was pressed.

Syntax

get key(): string

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

Type

String

Examples

Get the keyboard event's key property

JHcoIiNteUVsZW1lbnQiKS5vbktleVByZXNzKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGtleSA9IGV2ZW50LmtleTsgIC8vICJBIgp9ICk7Cg==
$w("#myElement").onKeyPress( (event, $w) => {
  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.

JHcoIiNteUVsZW1lbnQiKS5vbktleVByZXNzKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGtleSAgPSBldmVudC5rZXk7ICAgICAgICAgICAgICAgICAvLyAiQSIKICBsZXQgc2hpZnQgPSBldmVudC5zaGlmdEtleTsgICAgICAgICAgIC8vIHRydWUKICBsZXQgbWV0YSA9IGV2ZW50Lm1ldGFLZXk7ICAgICAgICAgICAgIC8vIGZhbHNlCiAgbGV0IGFsdCA9IGV2ZW50LmFsdEtleTsgICAgICAgICAgICAgICAvLyBmYWxzZQogIGxldCBjdHJsID0gZXZlbnQuY3RybEtleTsgICAgICAgICAgICAgLy8gZmFsc2UKICBsZXQgdmFsdWUgPSBldmVudC5uZXdWYWx1ZTsgICAgICAgICAgIC8vICJTRUEiCn0gKTsK
$w("#myElement").onKeyPress( (event, $w) => {
  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

metaKey

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

Syntax

get metaKey(): boolean

Type

Boolean

Examples

Get the keyboard event's metaKey property

JHcoIiNteUVsZW1lbnQiKS5vbktleVByZXNzKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IG1ldGEgPSBldmVudC5tZXRhS2V5OyAgLy8gZmFsc2UKfSApOwo=
$w("#myElement").onKeyPress( (event, $w) => {
  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.

JHcoIiNteUVsZW1lbnQiKS5vbktleVByZXNzKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGtleSAgPSBldmVudC5rZXk7ICAgICAgICAgICAgICAgICAvLyAiQSIKICBsZXQgc2hpZnQgPSBldmVudC5zaGlmdEtleTsgICAgICAgICAgIC8vIHRydWUKICBsZXQgbWV0YSA9IGV2ZW50Lm1ldGFLZXk7ICAgICAgICAgICAgIC8vIGZhbHNlCiAgbGV0IGFsdCA9IGV2ZW50LmFsdEtleTsgICAgICAgICAgICAgICAvLyBmYWxzZQogIGxldCBjdHJsID0gZXZlbnQuY3RybEtleTsgICAgICAgICAgICAgLy8gZmFsc2UKICBsZXQgdmFsdWUgPSBldmVudC5uZXdWYWx1ZTsgICAgICAgICAgIC8vICJTRUEiCn0gKTsK
$w("#myElement").onKeyPress( (event, $w) => {
  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

shiftKey

Indicates if the Shift key was pressed.

Syntax

get shiftKey(): boolean

Type

Boolean

Examples

Get the keyboard event's shiftKey property

JHcoIiNteUVsZW1lbnQiKS5vbktleVByZXNzKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IHNoaWZ0ID0gZXZlbnQuc2hpZnRLZXk7ICAvLyB0cnVlCn0gKTsK
$w("#myElement").onKeyPress( (event, $w) => {
  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.

JHcoIiNteUVsZW1lbnQiKS5vbktleVByZXNzKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGtleSAgPSBldmVudC5rZXk7ICAgICAgICAgICAgICAgICAvLyAiQSIKICBsZXQgc2hpZnQgPSBldmVudC5zaGlmdEtleTsgICAgICAgICAgIC8vIHRydWUKICBsZXQgbWV0YSA9IGV2ZW50Lm1ldGFLZXk7ICAgICAgICAgICAgIC8vIGZhbHNlCiAgbGV0IGFsdCA9IGV2ZW50LmFsdEtleTsgICAgICAgICAgICAgICAvLyBmYWxzZQogIGxldCBjdHJsID0gZXZlbnQuY3RybEtleTsgICAgICAgICAgICAgLy8gZmFsc2UKICBsZXQgdmFsdWUgPSBldmVudC5uZXdWYWx1ZTsgICAgICAgICAgIC8vICJTRUEiCn0gKTsK
$w("#myElement").onKeyPress( (event, $w) => {
  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

target

Gets the element that the event was fired on.

Syntax

get target(): string

Type

Element

Examples

Get the ID of the target element

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

Mixed In From

$w.Event

type

type

Gets the type of event that was fired.

Syntax

get type(): string

Type

String

Examples

Get the type of the event

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

Mixed In From

$w.Event