CodeAPI

TextInputMixin

Provides functionality for elements that accept text as input.

Table of Contents

PROPERTIES

?
Store values associated with an object.
maxLengthSets or gets the maximum number of characters that can be entered.
placeholderSets or gets the element's placeholder text.

FUNCTIONS

?
Perform actions on an object.
onKeyPress( )

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

maxLength

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

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.

Syntax

get maxLength(): number
set maxLength(value: number): void
TYPE
?
The kind of data the property stores.
number

Examples

Get an element's maximum length

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

Set an element's maximum length

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

Remove an element's maximum length restriction

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

placeholder

Sets or gets the element's placeholder text.

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.

Syntax

get placeholder(): string
set placeholder(value: string): void
TYPE
?
The kind of data the property stores.
string

Examples

Get an element's placeholder text

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

Set an element's placeholder text

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

onKeyPress( )

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

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.

Note

Some browsers do not issue a key press event for certain keys, such as arrow keys or the shift key. Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onKeyPress(eventHandler: KeyboardEventHandler): Element
callback KeyboardEventHandler(event: KeyboardEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
eventHandler
function(event: KeyboardEvent, $w: $w)

The name of the function or the function expression to run when a key is pressed.

?
The kind of data the property stores.
event
The keyboard event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

Examples

Get the key that was pressed

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

Get all of the keyboard event's properties

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