Introduction

A button on your site.

Did this help?

Button CSS Classes

Note: This feature is only available to Wix Studio users.

You can use the classes listed below to style your Button elements with CSS.

For more information on styling your elements with CSS, see Styling Elements with CSS and the MDN CSS reference docs.

Important: Element structure and undocumented class names may change without advance warning. To avoid unintended style changes to your site, select elements with the documented class names only.

.button

Targets button elements. For example:

Copy
.button { width: 200px; cursor: default; background-color: #116dff; }

.button__label

Targets button label text. For example:

Copy
.button__label { font-family: sans-serif; font-weight: 700; text-transform: lowercase; color: black; }

.button__icon

Targets button icon images. For example:

Copy
.button__icon { width: 50px; height: 50px; border-radius: 50%; box-shadow: 5px 5px 10px; }
Did this help?

accessibility


accessibilityAccessibilityRead-only

Sets and gets the Accessible Rich Internet Application (ARIA) attributes of the element.

ARIA attributes are a set of properties that define ways to make web content and applications more accessible to people with disabilities. The properties provide additional information about the structure, behavior, and state of elements to assistive technologies such as screen readers, braille displays, and voice control software. Set the accessibility properties to design your elements to be more inclusive and usable to users with visual, auditory, motor, and or cognitive disabilities. The accessibility object only affects how assistive technologies read and present site content to users. It doesn't affect the appearance, functionality, or SEO of your site.

Note: Incorrect use of ARIA can worsen accessibility for assistive technology users. Use carefully and test with assistive technologies.

Learn more about ARIA attributes.

JavaScript
$w("#myButton").accessibility.ariaDescribedBy = $w("#buttonDescriptionText"); $w("#myButton").accessibility.ariaExpanded = true; $w("#myButton").accessibility.ariaHasPopup = false; $w("#myButton").accessibility.ariaLabel = "toggle button"; $w("#myButton").accessibility.ariaLabelledBy = $w("#buttonLabelText"); $w("#myButton").accessibility.ariaPressed = true;
Did this help?

icon


iconstring

Sets or gets the icon image displayed on the button.

The icon property defines the vector image used as the button’s icon.

Setting icon changes the button icon to the image indicated by the new value. Getting the icon property returns the location of the icon image file. To delete a button's icon set icon to null, undefined, or an empty string.

The following formats are supported:

  • Vector images from the Media Manager: wix:vector://v1//
  • Vector images from the web: http(s)://
  • Vector XML string: ...

Note: Image Buttons don't support this property.

JavaScript
$w("#myButton").icon = "wix:vector://v1/ce0334_2cec984ab68c490891dda1b53a33fead.svg/my-vector-graphic.svg";
Did this help?

iconCollapsed


iconCollapsedbooleanRead-only

Indicates if the button’s icon is collapsed or expanded.

If iconCollapsed is true, the icon isn't displayed in the button under any circumstances.

If iconCollapsed is false, the icon is displayed unless the icon's button is hidden or collapsed.

To set the iconCollapsed property on an element, use the element's collapseIcon() and expandIcon() functions.

Note:

  • A collapsed icon doesn't take up any space in the button.
  • If you delete a button's icon, iconCollapsed retains the deleted icon's final state.
JavaScript
let iconStatus = $w("#myButton").iconCollapsed; // true
Did this help?

label


labelstring

Sets or gets a button's label.

JavaScript
let buttonLabel = $w("#mobileButton1").label; // "Submit"
Did this help?


style


styleStyleRead-only

Gets an object containing information about the button's styles.

The following styles can be used with buttons:

Getting or setting a button's hover and disabled styles affects the button's appearance only in those respective states. All other available styles apply solely to the button's regular state.

Note: Not all styles can be used on all button designs. To determine which styles work with a specific button design, go to the Button Design panel in the Editor, choose a design, and click Customize Design. The design options that you see in the Button Design panel for your particular button are the styles you can use in your code.

JavaScript
$w("#myElement").style.backgroundColor = "rgba(255,0,0,0.5)";
Did this help?

tabIndex


tabIndexnumber

Sets or gets the tab index of an element on a site page.

The tabIndex property determines the order in which elements can be focused on or selected using the tab key on the keyboard. By default, web browsers only assign a tab index to interactive elements such as links and form controls. When set to 0, the element becomes part of the keyboard tab and focus order. When set to -1, the element isn't part of the keyboard focus order but can still become focusable using the focus() function.

Supported values: -1, 0

Set the tab index of an element
JavaScript
const myElement = $w("#myElement"); myElement.tabIndex = 0;
Did this help?

customClassList


customClassListCustomClassListRead-only

A property that represents an element's custom CSS classes.

This property is only available to Wix Studio users.

You can use this property to manipulate the custom CSS classes of an element. For example, you can add a custom class to an element or replace an existing class with a new custom class.

Custom classes are those that you create on your site, not the predefined global classes that are provided for each element.

Note: For more information, see Styling Elements with CSS and the MDN CSS reference docs.

Gets a list of the classes of an element
JavaScript
$w("#myElement").customClassList.values(); // ["className1", "className2"]
Did this help?

deleted


deletedbooleanRead-only

Indicates if an element was temporarily deleted from the DOM. Use the restore function to restore the deleted element.

If deleted is true, the element is not in the current DOM.

If deleted is false the element is in the current DOM.

Notes:

  • An element whose deleted status is true can be edited.
  • In Wix Studio, an element whose deleted status is false will not be displayed if the element has been set to Hide.
JavaScript
const isDeleted = $w("#myElement").deleted; // true
Did this help?

global


globalbooleanRead-only

Indicates if an element appears on all pages or only on the current page.

If global is true, the element appears on all pages.

If global is false, the element only appears on the current page.

Get whether an element is displayed on all pages
JavaScript
let isGlobal = $w("#myElement").global; // false
Did this help?

id


idstringRead-only

Gets the element's ID.

The ID is the element's unique identifier. It is used when selecting elements using the $w() function.

An element's id is set in the Editor using the Properties panel.

Get the ID
JavaScript
let myId = $w("#myElement").id; // "myElement"
Did this help?

parent


parentNodeRead-only

Gets the element's parent element.

Some elements can contain other elements. This occurs when you drag an element onto a container element. The container is the parent of all the elements it contains.

Page, Header, and Footer are top-level elements and have no parent.

Get the parent element and the parent's ID
JavaScript
let parentElement = $w("#myElement").parent; let parentId = parentElement.id; // "page1"
Did this help?

rendered


renderedbooleanRead-only

Indicates if an element is currently in the DOM structure.

If rendered is true, the element is in the current DOM structure and can be used.

If rendered is false the element is not in the current DOM structure.

An element might not be in the DOM if it is in a slide or a state which is not currently showing.

Get an element's rendered status
JavaScript
let isRendered = $w("#myElement").rendered; // true
Did this help?

type


typestringRead-only

Gets the element's type.

Possible values include:

  • $w.TextInput
  • $w.TextBox
  • $w.RichTextBox
  • $w.RadioButtonGroup
  • $w.CheckboxGroup
  • $w.Dropdown
  • $w.SelectionTags
  • $w.Slider
  • $w.DatePicker
  • $w.UploadButton
  • $w.RatingsInput
  • $w.AddressInput
  • $w.Switch
  • $w.SignatureInput
  • $w.Captcha
Get the element's type
JavaScript
let myType = $w("#myElement").type; // "$w.Type"
Did this help?

collapsed


collapsedbooleanRead-only

Indicates if the element is collapsed or expanded.

If collapsed is true, the element is not displayed on the page under any circumstances. However, the collapsed element is still in the site's DOM. Unlike a hidden element, a collapsed element doesn't take up any space on the page. When collapsed, elements positioned within 70 pixels below the collapsed element and each other move up to take the collapsed element's place where possible. The elements that move up maintain their positions relative to one another.

If collapsed is false, the element may be displayed on the page. Elements that moved up to take the collapsed element's place on the page are moved back down.

However, an expanded element (an element whose collapsed property is false) is still not displayed if:

  • It is hidden.
  • Its parent element is hidden or collapsed.
  • It is a slide in a Slideshow which is currently not being displayed.
  • In Wix Studio, it has been set to Hide in the Layers panel in that breakpoint.

Even if the element is not displayed due to the conditions mentioned above, if its collapsed property is false, it's displayed when the conditions no longer apply.

To set the collapsed property on an element, use the element's collapse() and expand() functions.

If you select Collapsed on load in the element's Properties panel in the Editor, the collapsed property is set to true when the page loads.

JavaScript
let isCollapsed = $w("#myElement").collapsed; // false
Did this help?

hidden


hiddenbooleanRead-only

Indicates if the element is visible or hidden.

If hidden is true, the element is not displayed on the page under any circumstances. However, the hidden element is still in the site's DOM. Unlike a collapsed element, a hidden element continues to take up the same space on the page as it did when it was visible.

If hidden is false, the element may be displayed on the page.

However, an element whose hidden property is false is still not displayed if:

  • It is collapsed.
  • Its parent element is hidden or collapsed.
  • It is a slide in a Slideshow which is currently not being displayed.
  • In Wix Studio, it has been set to Hide for the current breakpoint.

Even if the element is not displayed due to the conditions mentioned above, if its hidden property is set to false, it's displayed when the conditions no longer apply.

To determine if the element is actually visible, use the isVisible property.

To set the hidden property on an element, use the element's hide() or show() functions.

If you select Hidden in the Properties and Events panel in the Editor, the hidden property is set to true when the page loads.

Note: An element's hidden property is not the same as its isVisible property. The hidden property indicates whether the element should be displayed, while isVisible indicates if it is actually displayed.

JavaScript
let isHidden = $w("#myElement").hidden; // false
Did this help?

isVisible


isVisiblebooleanRead-only

Indicates if the element is actually visible.

If isVisible is true, the element is displayed on the page.

If isVisible is false, the element is not displayed on the page.

The value of the isVisible property is calculated based on the hidden, collapsed, rendered, and deleted properties of the element and all of its ancestors. isVisible is true only the element is displayed on the page. This means that for the element and its ancestors, rendered is true and hidden, collapsed, and deleted are false.

Notes:

  • An element's isVisible property is not the same as its hidden property. The isVisible property indicates whether the element is actually displayed, while hidden indicates if it should be displayed.

  • The isVisible property of an element remains true even if another element completely covers it so that a user cannot see it.

  • In Wix Studio, even if the isVisible property of the element is true, it will not be displayed if the element has been set to Hide for the current breakpoint in the Layers more actions menu.

Get whether an element is visible
JavaScript
let isVisible = $w("#myElement").isVisible; // true
Did this help?

enabled


enabledbooleanRead-only

Indicates if the element is enabled or disabled.

If enabled is true, users can interact with the element.

If enabled is false, users cannot interact with the element.

When an element is disabled:

  • Its color is faded or grayed out.
  • Animations that the element normally exhibits when being interacting with do not occur.
  • Actions that the element has been configured to perform, such as opening a link, do not occur.
  • Event handlers that have been bound to the element, such as with onMouseIn, do not run.
  • If the element is an input element, such as a dropdown or text box, users cannot interact with it.

To set the enabled property of an element, use the element's enable() or disable() functions.

The enabled property can also be set in the Editor using the Properties and Events panel.

JavaScript
let isEnabled = $w("#myElement").enabled; // true
Did this help?

rel


relstring

Gets or sets the relationship between the link's source page and the target page.

The rel property provides additional context to search engines and browsers about how they should treat the link, influencing SEO, security, and other link behavior.

Supported values:

  • 'noopener': Prevents the target page from accessing the source page with the window.opener property, reducing the risk of malicious code.
  • 'noreferrer': Prevents the browser from sending referrer information, such as the URL of the source page, to the target page. This enhances user privacy by ensuring the target page can't track the origin of the visit.
  • 'nofollow': Tells search engines not to pass SEO link equity to the target page. This helps prevent the manipulation of search rankings and maintains the integrity of your site's SEO.
  • 'sponsored': Indicates that the link is part of a paid or promotional arrangement, ensuring transparency and compliance with search engine guidelines.

An element can have multiple rel values as a single string with each value separated by a space. For example, 'nofollow sponsored'.

The default value for external web links (starting with http:// and https://) is 'noopener'.

JavaScript
let rel = $w("#myElement").rel; // "noopener"
Did this help?

target


targetstring

Sets or gets the target of the element's link.

An element's target determines where its link opens. The target can be set so the link opens in the current page or in a new page.

Supported values are:

  • "_blank": The link opens in a new tab or window.
  • "_self": The link opens in the tab or window.

Note: Link targets are only supported for external web links (e.g. http://www.wix.com).

JavaScript
let url = $w("#myElement").target; // "_blank"
Did this help?

effects


effectsEffectsRead-only

An object containing functionality for displaying the effects defined for an element using Wix Studio.

Note: This API can only be used in Wix Studio.

Get an element's effects
JavaScript
let myEffects = $w("#myElement").effects; let firstEffect = myEffects[0];
Did this help?

collapseIcon( )


Collapses the button’s icon and sets its iconCollapsed property to true.

The collapseIcon() function returns a Promise that resolves when the element's iconCollapsed property is set to true.

Method Declaration
Copy
function collapseIcon(): Promise<void>;
Request
This method does not take any parameters
JavaScript
$w("#myButton").collapseIcon();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

expandIcon( )


Expands the button’s icon and sets its iconCollapsed property to false.

The expandIcon() function returns a Promise that resolves when the element's iconCollapsed property is set to false.

Method Declaration
Copy
function expandIcon(): Promise<void>;
Request
This method does not take any parameters
JavaScript
$w("#myButton").expandIcon();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

onMouseIn( )


Adds an event handler that runs when the pointer is moved onto the element.

Method Declaration
Copy
function onMouseIn(handler: function): Button;
Method Parameters
handlerfunctionRequired

handler(event: MouseEvent): void The name of the function or the function expression to run when the pointer is moved onto the element.

Returns
Return Type:Button
JavaScript
$w("#myElement").onMouseIn((event) => { let clientX = event.clientX; // 362 let clientY = event.clientY; // 244 let offsetX = event.offsetX; // 10 let offsetY = event.offsetY; // 12 let pageX = event.pageX; // 362 let pageY = event.pageY; // 376 let screenX = event.screenX; // 3897 let screenY = event.screenY; // 362 });
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

onMouseOut( )


Adds an event handler that runs when the pointer is moved off of the element.

Method Declaration
Copy
function onMouseOut(handler: function): Button;
Method Parameters
handlerfunctionRequired

handler(event: MouseEvent): void The name of the function or the function expression to run when the pointer is moved off of the element.

Returns
Return Type:Button
JavaScript
$w("#myElement").onMouseOut((event) => { let clientX = event.clientX; // 362 let clientY = event.clientY; // 244 let offsetX = event.offsetX; // 10 let offsetY = event.offsetY; // 12 let pageX = event.pageX; // 362 let pageY = event.pageY; // 376 let screenX = event.screenX; // 3897 let screenY = event.screenY; // 362 });
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

delete( )


Deletes an element from the DOM. This is a temporary deletion. Use restore to restore the deleted element.

SEO crawlers cannot find content in an element whose deleted status is true. Content in an element that is in hidden status can be found by crawlers.

Note: An element whose deleted status is true can be edited.

The delete() function returns a Promise that is resolved when the element's deleted property has been set to true.

Method Declaration
Copy
function delete(): Promise<void>
Request
This method does not take any parameters
JavaScript
$w("#myElement").delete();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

onViewportEnter( )


Adds an event handler that runs when an element is displayed in the viewable part of the current window.

An element enters the viewport when the page is scrolled to show any part of the element. An element also enters the viewport if it was hidden or collapsed and is then shown or expanded in the viewable part of the current window. onViewportEnter() is not fired for hidden or collapsed elements even if they are scrolled into view.

Method Declaration
Copy
function onViewportEnter(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: Event): void The name of the function or the function expression to run when the element enters the viewport.

Returns
Return Type:Element
Get the ID of the element that has entered the viewport
JavaScript
$w("#myElement").onViewportEnter((event) => { let targetId = event.target.id; // "myElement" });
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

onViewportLeave( )


Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.

An element leaves the viewport when the page is scrolled so that the element is completely out of view. An element also leaves the viewport if it was shown or expanded and is then hidden or collapsed from the viewable part of the current window. onViewportLeave() is not fired for hidden or collapsed elements even if they are scrolled out of view.

Method Declaration
Copy
function onViewportLeave(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: Event): void The name of the function or the function expression to run when the element leaves the viewport.

Returns
Return Type:Element
Get the ID of the element that has left the viewport
JavaScript
$w("#myElement").onViewportLeave((event) => { let targetId = event.target.id; // "myElement" });
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

restore( )


Restores a deleted element to the DOM.

The restore() function returns a Promise that is resolved when the element's deleted property has been set to false. See the delete function.

Method Declaration
Copy
function restore(): Promise<void>;
Request
This method does not take any parameters
JavaScript
$w("#myElement").restore();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

scrollTo( )


Scrolls the page to the top of the element using an animation.

The scrollTo() function returns a Promise that is resolved when the animated scroll is complete and the element is in view.

To scroll to a specific location on the page, see the wix-window-frontend scrollTo() function.

Tip: Use the wix-window-frontend scrollTo() function to scroll directly to an element, and also disable the animation. To get the coordinates for scrolling, display the Wix Editor Toolbar. In the Editor, move the cursor to the top-left pixel where you want the page to scroll to. The X and Y axis Position values show the coordinates.

Note: To use scrollTo() with a header element, the Header Scroll Setting must be set to Scrolls with site. To scroll to the header with other settings, use the wix-window-frontend scrollTo() function.

Method Declaration
Copy
function scrollTo(): Promise<void>;
Request
This method does not take any parameters
JavaScript
$w("#myElement").scrollTo();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

collapse( )


Collapses the element and sets its collapsed property to true.

The collapse() function returns a Promise that is resolved when the element's collapsed property has been set to true.

To learn about the behavior of a collapsed element, see the collapsed property.

You can also collapse an element when the page loads by using the Properties and Events panel in the Editor.

Note: The collapse() function doesn't remove elements from the DOM. To soft delete an element from the DOM, use the delete() function.

Method Declaration
Copy
function collapse(): Promise<void>;
Request
This method does not take any parameters
JavaScript
$w("#myElement").collapse();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

expand( )


Expands the element and sets its collapsed property to false.

The expand() function returns a Promise that is resolved when the element's collapsed property has been set to false.

To learn about the behavior of an expanded element, see the collapsed property.

Notes:

  • In Wix Studio, an element will not become visible by using expand() if it has been marked as "Don't Display" for the current breakpoint. Calling expand() will however, change the collapsed property of the element to false.

  • It is recommended not to mix expand() and collapse() with Hide and Show in Wix Studio.

Method Declaration
Copy
function expand(): Promise<void>;
Request
This method does not take any parameters
JavaScript
$w("#myElement").expand();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

hide( )


Hides the element and sets its hidden property to true, using an effect if specified.

The hide() function hides the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to true.

Note: The hide() function doesn't remove the element from the DOM. To temporarily delete an element from the DOM and prevent it from detection by SEO crawlers, use the delete() function.

To learn about the behavior of a hidden element, see the hidden property.

You can optionally apply an effect when hiding the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

  • "arc"
  • "bounce"
  • "fade"
  • "flip"
  • "float"
  • "fly"
  • "fold"
  • "glide"
  • "puff"
  • "roll"
  • "slide"
  • "spin"
  • "turn"
  • "zoom"

You can also hide an element when the page loads by using the Properties and Events panel in the Editor.

Method Declaration
Copy
function hide(effectName: string, effectOptions: union): Promise<void>;
Method Parameters
effectNamestring

The name of the effect to play when hiding the item.


effectOptionsunion

The effect's options.

JavaScript
$w("#myElement").hide();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

show( )


Shows the element and sets its hidden property to false, using an effect if specified.

The show() function shows the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to false.

You can optionally apply an effect when showing the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

This table shows possible effectName values and their corresponding names in the editor:

Effect Name ValueEditor Animation Name
"arc"Arc-In
"bounce"Bounce-In
"fade"Fade-In
"flip"Flip-In
"float"Float-In
"fly"Fly-In
"fold"Fold-In
"glide"Glide-In
"puff"Puff-In
"roll"Reveal
"slide"Slide-In
"spin"Spin-In
"turn"Turn-In
"zoom"Expand-In

Notes:

  • In Wix Studio, the show () function will not make an element visible for a given breakpoint if the element has been set to "Hide for that breakpoint in the Layers more actions menu. Calling show() however, will change the hidden property of the element to false.
  • It is recommended not to mix show() and hide() with Hide and Show in Wix Studio.
Method Declaration
Copy
function show(effectName: string, effectOptions: union): Promise<void>;
Method Parameters
effectNamestring

The name of the effect to play when showing the item.


effectOptionsunion

The effect's options.

JavaScript
$w("#myElement").show();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

disable( )


Disables the element and sets its enabled property to false.

The disable() function returns a Promise that is resolved when the element's enabled property has been set to false.

To learn about the behavior of a disabled element, see the enabled property.

Method Declaration
Copy
function disable(): Promise<void>;
Request
This method does not take any parameters
JavaScript
$w("#myElement").disable();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

enable( )


Enables the element and sets its enabled property to true.

The enable() function returns a Promise that is resolved when the element's enabled property has been set to true.

To learn about the behavior of an enabled element, see the enabled property.

Method Declaration
Copy
function enable(): Promise<void>;
Request
This method does not take any parameters
JavaScript
$w("#myElement").enable();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

onClick( )


Adds an event handler that runs when the element is clicked.

An element receives a click event when a user clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Note: To avoid unpredictable behavior, don't set redirect links in the editor for elements that already have an onClick event handler.

Method Declaration
Copy
function onClick(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: MouseEvent): void The name of the function or the function expression to run when the element is clicked.

Returns
Return Type:Element
JavaScript
$w("#myElement").onClick((event) => { let targetId = event.target.id; // "myElement" });
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

onDblClick( )


Adds an event handler that runs when the element is double-clicked.

An element receives a dblClick event when a user double-clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Method Declaration
Copy
function onDblClick(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: MouseEvent): void The name of the function or the function expression to run when the element is clicked.

Returns
Return Type:Element
Get the ID of the element that was double-clicked
JavaScript
$w("#myElement").onDblClick((event) => { let targetId = event.target.id; // "myElement" });
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

blur( )


Removes focus from the element.

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

Method Declaration
Copy
function blur(): void;
Request
This method does not take any parameters
Remove focus from an element
JavaScript
$w("#myElement").blur();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

focus( )


Places focus on the element.

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 are called.

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

Method Declaration
Copy
function focus(): void;
Request
This method does not take any parameters
Place focus on an element
JavaScript
$w("#myElement").focus();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

onBlur( )


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

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

Note: onBlur() has no effect when applied to RadioButtonGroup elements.

Method Declaration
Copy
function onBlur(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: Event): void The name of the function or the function expression to run when the element loses focus.

Returns
Return Type:Element
Get the ID of the element that has lost focus
JavaScript
$w("#myElement").onBlur((event) => { let targetId = event.target.id; // "myElement" });
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

onFocus( )


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

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

Note: onFocus() has no effect when applied to RadioButtonGroup elements.

Method Declaration
Copy
function onFocus(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: Event): void The name of the function or the function expression to run when the element receives focus.

Returns
Return Type:Element
Get the ID of the element that has received focus
JavaScript
$w("#myElement").onFocus((event) => { let targetId = event.target.id; // "myElement" });
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?