$w.TextInputMixin

$w.TextInputMixin

Provides functionality for elements that accept text as input.

Contents

maxLength Sets or gets the maximum number of characters that can be entered.
placeholder Sets or gets the element's placeholder text.
onKeyPress( ) Adds an event handler that runs when the cursor is inside the input element and a key is pressed.
maxLength

maxLength

Sets or gets the maximum number of characters that can be entered.

Syntax

get maxLength(): Number
set maxLength(value: Number): void

Description

Setting the maxLength property of an input element to a positive number restricts user input, by manual entry or pasting, to text that does not exceed the maxLength. However, it does not limit your ability to change the element's value to one that exceeds maxLength programmatically.

To remove the maximum length restriction that has been set on the input element, set maxLength to 0.

Getting the maxLength property returns the element's current maxLength setting.

The number of characters is calculated by Unicode code points.

Type

Number

Examples

Get an element's maximum length

bGV0IG1heExlbiA9ICR3KCIjbXlFbGVtZW50IikubWF4TGVuZ3RoOyAvLyA0MAo=
let maxLen = $w("#myElement").maxLength; // 40

Set an element's maximum length

JHcoIiNteUVsZW1lbnQiKS5tYXhMZW5ndGggPSA0MDsK
$w("#myElement").maxLength = 40;

Remove an element's maximum length restriction

JHcoIiNteUVsZW1lbnQiKS5tYXhMZW5ndGggPSAwOwo=
$w("#myElement").maxLength = 0;
placeholder

placeholder

Sets or gets the element's placeholder text.

Syntax

get placeholder(): string
set placeholder(value: string): void

Description

Placeholder text is typically used to provide a hint to the user of what to enter into a input element that accepts text. When the user begins to enter text, the placeholder text disappears.

Type

String

Examples

Get an element's placeholder text

bGV0IHBsYWNlaG9sZFRleHQgPSAkdygiI215RWxlbWVudCIpLnBsYWNlaG9sZGVyOyAvLyAiRW50ZXIgbmFtZSIK
let placeholdText = $w("#myElement").placeholder; // "Enter name"

Set an element's placeholder text

JHcoIiNteUVsZW1lbnQiKS5wbGFjZWhvbGRlciA9ICJFbnRlciB5b3VyIG5hbWUiOwo=
$w("#myElement").placeholder = "Enter your name";
onKeyPress( )

onKeyPress( )

Adds an event handler that runs when the cursor is inside the input element and a key is pressed.

function onKeyPress(handler: KeyboardEventHandler): Element
callback KeyboardEventHandler(event: Event, $w: Function): void

Description

A text input receives a keyPress event when a user presses a key on the keyboard while the cursor is inside the input element.

Parameters

eventHandler function(event, $w) The name of the function or the function expression to run when a key is pressed.
event KeyboardEvent The keyboard event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element on which the event is now registered.

Examples

Get the key that was pressed

JHcoIm15RWxlbWVudCIpLm9uS2V5UHJlc3MoIChldmVudCwgJHcpID0+IHsKICBsZXQga2V5ID0gZXZlbnQua2V5OyAgLy8gImEiCn0gKTsK
$w("myElement").onKeyPress( (event, $w) => {
  let key = event.key;  // "a"
} );

Get all of the keyboard event's properties

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"
} );