Introduction

A text input is configured to receive different types of information, such as strings, numbers, or passwords.

Did this help?

Text Input CSS Classes

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

You can use the classes listed below to style your TextInput 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.

.text-input

Targets text input elements. For example:

Copy
.text-input { width: 500px; display: flex; flex-direction: row; }

.text-input__label

Targets text input label text. For example:

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

.text-input__input

Targets text input boxes. For example:

Copy
.text-input__input { border: none; border-bottom: 2px solid #840292; background-color: #dfd2f4; font-family: monospace; }
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("#myTextInput").accessibility.ariaDescribedBy = $w("#descriptionText"); $w("#myTextInput").accessibility.ariaExpanded = false; $w("#myTextInput").accessibility.ariaHasPopup = false; $w("#myTextInput").accessibility.ariaInvalid = true; $w("#myTextInput").accessibility.ariaLabel = "text input field"; $w("#myTextInput").accessibility.ariaLabelledBy = $w("#labelText"); $w("#myTextInput").accessibility.ariaRequired = true;
Did this help?

inputType


inputTypestring

Sets or gets the input type of an Input element. Does not change the type of data stored in the text input's value property, which will remain a string.

Setting the inputType property sets what type of data a user can enter into the text input element. However, it does not limit your ability to change the value programmatically.

Regardless of the type of data entered, the data will be stored as a string in the text input's value property. For example, if the user enters the number 42, the text input's value will hold the string "42". Any required type conversions will need to be implemented manually in page code.

Getting the inputType property gets what type of data a user can enter into the text input element.

The text input types are:

  • "text": Can contain any type of character.
  • "password": A password field. Text is hidden with bullets (•••).
  • "number": A valid number.
  • "email": A valid email address.
  • "url": A valid web address.
  • "tel": Can contain only digits and certain symbols.

You can also set an element's inputType property in the Editor using the Settings pane: Input Settings pane

JavaScript
let type = $w("#myTextInput").inputType; // "email"
Did this help?

max


maxnumber

Sets or gets the maximum value for a text input element whose type is set to Number.

Setting the max property restricts users from changing the text input's value to a number greater than max if the text input is set to be a Number type. However, it does not limit your ability to change the value to a number greater than max programmatically.

Set max to undefined to remove the current maximum value limitation.

Getting the max property returns the maximum value a user can enter into the text input.

You can also set an element's max property in the Editor using the Settings pane: Input Settings pane

JavaScript
let maxVal = $w("#myTextInput").max; // 200
Did this help?

min


minnumber

Sets or gets the minimum value for a text input element whose type is set to Number.

Setting the min property restricts users from changing the text input's value to a number lower than min if the text input is set to be a Number type. However, it does not limit your ability to change the value to a number lower than min programmatically.

Set min to undefined to remove the current minimum value limitation.

Getting the min property returns the minimum value a user can enter into the text input.

You can also set an element's min property in the Editor using the Settings pane: Input Settings pane

JavaScript
let minVal = $w("#myTextInput").min; // 100
Did this help?

numberSpinnerHidden


numberSpinnerHiddenbooleanRead-only

Indicates if the number spinner is hidden or visible for a numeric text input element.

If numberSpinnerHidden is true, and the inputType is 'number', the number spinner for the text input element is not shown. Use hideNumberSpinner() to hide the number spinner and showNumberSpinner() to show it.

The spinner allows site visitors to increment and decrement the numeric value of the text input.
Input Settings pane

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

style


styleStyleRead-only

Gets an object containing information about the text input's styles.

The following styles can be used with text input elements:

Getting or setting a text input's styles, gets or sets the styles of the text input's regular state. It does not set the styles of the text input's hover, focus, error, or disabled states.

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 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?

validity


validityValidityStateRead-only

Gets a ValidityState object that contains detailed information about the validity states of the element.

JavaScript
let validityObj = $w("#myElement").validity; let customError = validityObj.customError; // true let valid = validityObj.valid; // false let valueMissing = validityObj.valueMissing; // false let typeMismatch = validityObj.typeMismatch; // false let patternMismatch = validityObj.patternMismatch; // false let tooLong = validityObj.tooLong; // false let tooShort = validityObj.tooShort; // false let rangeUnderflow = validityObj.rangeUnderflow; // false let rangeOverflow = validityObj.rangeOverflow; // false let fileNotUploaded = validityObj.fileNotUploaded; // false let stepMismatch = validityObj.stepMismatch; // false let badInput = validityObj.badInput; // false let invalidTime = validityObj.invalidTime; // false let invalidDate = validityObj.invalidDate; // false
Did this help?

value


valuestring

Sets or gets a text input's value. This value will always be of type string, regardless of the text input's inputType.

To reset the text input, restoring any placeholder text, set the value property to null or undefined.

Changing a text input's value property to null or undefined will set the element's valid property to false and cause the element to visually indicate that it's contents are invalid. For example, a black outline might change to a red outline. You can remove this visual indication until the next time the element is updated by calling resetValidityIndication().

Notes:

  • Changing a text input's value in code does not trigger an onChange event.

  • Using the Input Settings panel in the Editor you can set the type of a text input. That type is used only for validation purposes. The value returned by the value property of a text input is always a string, regardless of the type set in the Editor.

  • If an element is connected to a dataset, setting the element's value in code does not set the value of the connected field in the dataset. That means if you use the dataset to perform a submit, the value changed in code is not reflected in the submitted item.

  • To submit the new value using a dataset, set the field's value using the setFieldValue() function before performing the submit.

JavaScript
let myValue = $w("#myElement").value; // "42"
Did this help?

label


labelstring

Sets or gets the label of an element.

JavaScript
let label = $w("#myElement").label; // "Submit"
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.

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

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

0
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
0
Did this help?

valid


validbooleanRead-only

Indicates if an input element's value is valid.

The valid property indicates if an element's value satisfies all conditions to pass a validation check. This includes basic validity conditions, such as whether the element has a value if it is required, and those specified in its onCustomValidation() event handler, if you defined one.

Note that validations other than required, including custom validations, are not run on input elements when they don't have a value.

Get whether the element is valid
JavaScript
let isValid = $w("#myElement").valid; // false
Did this help?

validationMessage


validationMessagestringRead-only

Gets a message indicating why the element is invalid, or an empty string if the message is valid.

Set the value of the validationMessage property using the reject() function of the onCustomValidation() event handler.

Get the validation message
JavaScript
let msg = $w("#myElement").validationMessage; // "value missing"
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?

maxLength


maxLengthnumber

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

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 null or undefined.

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

The number of characters is calculated by Unicode code points.

JavaScript
let maxLen = $w("#myElement").maxLength; // 40
Did this help?

placeholder


placeholderstring

Sets or gets the element's placeholder text.

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.

JavaScript
let placeholdText = $w("#myElement").placeholder; // "Enter name"
Did this help?

readOnly


readOnlyboolean

Sets or gets if a user can modify the value of the input element.

Setting the value of the readOnly property to true prevents users from changing the element's value. However, it does not limit your ability to change the value programmatically. Setting it to false allows users to change the element's value.

Getting the value of the readOnly property returns whether a user can modify the value of the input element.

You can also set an element's readOnly property in the Editor using the Settings pane:

Input Settings pane

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

required


requiredboolean

Sets or gets whether an input element is required to have a value.

Setting the required property to true causes the element to be invalid if it doesn't contain a value. Setting it to false allows the element to be valid even if it doesn't contain a value. The validity of the element can be checked using its validity property.

Getting the value of the required property returns whether the element is required.

You can also set an input element to be required by using the element's Settings panel in the Editor.

JavaScript
$w("#myElement").required = true;
Did this help?

hideNumberSpinner( )


Hides the number spinner for a numeric text input.

The hideNumberSpinner() function returns a Promise when the number spinner for a numeric text input element is hidden. A numeric text input element is a text input that has the inputType property set to 'number'.
Calling hideNumberSpinner() sets the numberSpinnerHidden property to true.

The spinner allows site visitors to increment and decrement the numeric value of the text input.
Input Settings pane

Method Declaration
Copy
function hideNumberSpinner(): void;
Request
This method does not take any parameters
Hide the number spinner for a text input element
JavaScript
$w("#myTextInput").hideNumberSpinner();
Errors

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

Did this help?

onCustomValidation( )


Adds an event handler that runs when the element's validation is checked.

The onCustomValidation() function allows you perform custom validation in addition to any basic validation that was defined in the Editor.

To invalidate the element, call the reject() function that is passed into the validator callback function and pass it a validation message.

The element's validity is checked when the value of the element changes either by user interaction or programmatically.

Note that validations other than required, including custom validations, are not run on input elements when they don't have a value.

You can use the override parameter to override previously applied custom validations.

Method Declaration
Copy
function onCustomValidation(validator: function, override: boolean): void;
Method Parameters
validatorfunctionRequired

validator(value: string, reject: Function): void The name of the function or the function expression to run when the element's custom validation is checked.


overrideboolean

When true, overrides any existing custom validations set for the element so that only the current custom validation applies.

When false, the current custom validation is added to the previously applied validations and all of them run. The order of execution follows the order the validations were set. If one of the validations rejects, the rest of the validations won't run.

Defaults to true, so that omitting the override property causes the current custom validation to override any other validations. If multiple validations are set to override explicitly or by default, only the last applied validation will run.

For example, if you add 4 custom validations to an element and set the override parameter to false, true, false, false respectively, the first validation won't run and the remaining validations will run. This is because the second validation overrides the first.

JavaScript
$w("#myElement").onCustomValidation((value, reject) => { if (value === "evil") { reject("Evil is invalid"); } });
Errors

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

Did this help?

showNumberSpinner( )


Shows the number spinner for a numeric text input.

The showNumberSpinner() function returns a Promise when the number spinner for a numeric text input element is shown. A numeric text input element is a text input that has the inputType property set to 'number'.
Calling showNumberSpinner() sets the numberSpinnerHidden property to false.

The spinner allows site visitors to increment and decrement the numeric value of the text input.
Input Settings pane

Method Declaration
Copy
function showNumberSpinner(): void;
Request
This method does not take any parameters
Show the number spinner for a text input element
JavaScript
$w("#myTextInput").showNumberSpinner();
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?

onChange( )


Adds an event handler that runs when an input element's value is changed.

An element receives a change event when a user changes the value in an input element.

A change event is not triggered when you change an element's value using the element's value property.

Because onChange() is fired before validations are performed, do not check any of the validation properties in the onChange() event handler. For example, do not code an if statement that checks the valid property in the onChange() because the property at this point contains values prior to the onChange().

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

handler(event: Event): void The name of the function or the function expression to run when the element's value changes.

Returns
Return Type:Element
Get the value of the element that was changed
JavaScript
$w("#myElement").onChange((event) => { let newValue = event.target.value; // "new value" });
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): Element;
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:Element
Get the mouse event info when the mouse enters an element
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): Element;
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:Element
Get the mouse event info when the mouse exits an element
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?

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
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
Errors

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

Did this help?

resetValidityIndication( )


Resets the element's visual validity indication.

Many elements have a visual cue that indicates whether they are valid or not. For example, a text input that usually has a black outline might have a red outline when its value is not valid.

The resetValidityIndication() function resets the validity indication of an element to show the element as valid. The actual validity state of the element is not affected. If the element was invalid, it remains invalid. The validity indication shows the element as valid until the element's validity is checked when the value of the element changes either by user interaction or programmatically. At that point, the element's validity indication shows the element as invalid if its value is not valid.

Method Declaration
Copy
function resetValidityIndication(): void;
Request
This method does not take any parameters
Reset an element's validity indicator
JavaScript
$w("#myElement").resetValidityIndication();
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
Errors

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

Did this help?

updateValidityIndication( )


Updates the element's visual validity indication based on its current validity state.

Many elements have a visual cue that indicates whether they are valid or not. For example, a text input that usually has a black outline might have a red outline when its value is not valid.

Method Declaration
Copy
function updateValidityIndication(): void;
Request
This method does not take any parameters
Update an element's validity indicator
JavaScript
$w("#myElement").updateValidityIndication();
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?

onInput( )


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

A text input receives an input event when a user changes its input value.

You can retrieve the input element's new value by getting the value from the target property of the Event passed to the handler you set using this function.

Method Declaration
Copy
function onInput(eventHandler: function): Element;
Method Parameters
eventHandlerfunctionRequired

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

Returns
Return Type:Element
Get the new input value
JavaScript
$w("#myElement").onInput((event) => { let newValue = event.target.value; // "newValue" });
Errors

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

Did this help?

onKeyPress( )


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

A text input receives a keyPress event when a user presses a key on the keyboard while the cursor is inside the input element. A keyPress event is fired for printable and non-printable characters.

Notes:

  • Some browsers do not issue a key press event for certain keys, such as arrow keys or the shift key.

  • When you retrieve the value from the target property of a KeyboardEvent, you get the value of the target element before the key was pressed.

Method Declaration
Copy
function onKeyPress(eventHandler: function): Element;
Method Parameters
eventHandlerfunctionRequired

eventHandler(event: KeyboardEvent): void The name of the function or the function expression to run when a key is pressed.

Returns
Return Type:Element
JavaScript
$w("myElement").onKeyPress((event) => { let key = event.key; // "a" });
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?

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?