$w.FocusMixin

$w.FocusMixin

Provides functionality for elements that can set and lose focus.

The element on the page that is currently active is the element in focus. Only one element on the page can have focus at any given moment. Typically, an element exhibits a visual cue, such as a subtle outline, indicating that it is in focus. The element in focus receives keystroke events if the user causes any.

An element receives focus and loses focus (blurs) through user actions, such as clicking and tabbing, or programmatically, using the focus( ) and blur( ) functions.

Contents

blur( ) Removes focus from the element.
focus( ) Places focus on the element.
onBlur( ) Adds an event handler that runs when the element loses focus.
onFocus( ) Adds an event handler that runs when the element receives focus.
blur( )

blur( )

Removes focus from the element.

function blur(): void

Description

The blur() function removes focus from the element and fires a blur event.

The blur event handlers set on this element by the onBlur( ) function or in the Editor will called.

Removing focus through a call to this function is equivalent to a user clicking on another element or tabbing out of the element manually.

If blur() is called on an element that is not in focus, it has no effect. The element in focus remains in focus and the onBlur event handlers are not called.

Examples

Remove focus from an element

JHcoIiNteUVsZW1lbnQiKS5ibHVyKCk7Cg==
$w("#myElement").blur();

See Also

onBlur( ), focus( ), onFocus( )

focus( )

focus( )

Places focus on the element.

function focus(): void

Description

The focus() function places focus on the element and fires a focus event.

The focus event handlers set on this element by the onFocus( ) function or in the Editor will called.

Receiving focus through a call to this function is equivalent to a user clicking on or tabbing to the element manually.

Examples

Place focus on an element

JHcoIiNteUVsZW1lbnQiKS5mb2N1cygpOwo=
$w("#myElement").focus();

See Also

onFocus( ), blur( ), onBlur( )

onBlur( )

onBlur( )

Adds an event handler that runs when the element loses focus.

function onBlur(handler: EventHandler): Element
callback EventHandler(event: Event, $w: Function): void

Description

An element loses focus (blurs) through user actions, such as clicking and tabbing, or programmatically, using the blur( ) function.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element losed focus.
event Event The 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 ID of the element that has lost focus

JHcoIiNteUVsZW1lbnQiKS5vbkJsdXIoIChldmVudCwgJHcpID0+IHsKICBsZXQgdGFyZ2V0SWQgPSBldmVudC50YXJnZXQuaWQ7IC8vICJteUVsZW1lbnQiCn0pOwo=
$w("#myElement").onBlur( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

See Also

blur( ), onFocus( ), focus( )

onFocus( )

onFocus( )

Adds an event handler that runs when the element receives focus.

function onFocus(handler: EventHandler): Element
callback EventHandler(event: Event, $w: Function): void

Description

An element receives focus through user actions, such as clicking and tabbing, or programmatically, using the focus( ) function.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element receives focus.
event Event The 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 ID of the element that has received focus

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

See Also

focus( ), onBlur( ), blur( )