A text input is configured to receive different types of information, such as strings, numbers, or passwords.
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:
.text-input {
width: 500px;
display: flex;
flex-direction: row;
}
.text-input__label
Targets text input label text. For example:
.text-input__label {
font-family: sans-serif;
font-weight: 700;
text-transform: lowercase;
color: black;
}
.text-input__input
Targets text input boxes. For example:
.text-input__input {
border: none;
border-bottom: 2px solid #840292;
background-color: #dfd2f4;
font-family: monospace;
}
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.
$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;
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:
let type = $w("#myTextInput").inputType; // "email"
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:
let maxVal = $w("#myTextInput").max; // 200
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:
let minVal = $w("#myTextInput").min; // 100
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.
let isHidden = $w("#myTextInput").numberSpinnerHidden; // false
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.
$w("#myElement").style.backgroundColor = "rgba(255,0,0,0.5)";
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
const myElement = $w("#myElement");
myElement.tabIndex = 0;
Gets a ValidityState object that contains detailed information about the validity states of the element.
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
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.
let myValue = $w("#myElement").value; // "42"
Sets or gets the label of an element.
let label = $w("#myElement").label; // "Submit"
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.
$w("#myElement").customClassList.values(); // ["className1", "className2"]
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:
deleted
status is true
can be edited.deleted
status is false
will not be displayed if the element has been set to Hide.const isDeleted = $w("#myElement").deleted; // true
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.
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.
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.
let isRendered = $w("#myElement").rendered; // true
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
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.
let isValid = $w("#myElement").valid; // false
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.
let msg = $w("#myElement").validationMessage; // "value missing"
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:
hidden
.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.
let isCollapsed = $w("#myElement").collapsed; // false
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:
collapsed
.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.
let isHidden = $w("#myElement").hidden; // false
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.
let isVisible = $w("#myElement").isVisible; // true
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:
onMouseIn
, do not run.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.
let isEnabled = $w("#myElement").enabled; // true
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.
let maxLen = $w("#myElement").maxLength; // 40
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.
let placeholdText = $w("#myElement").placeholder; // "Enter name"
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:
let isReadonly = $w("#myElement").readOnly; // true
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.
$w("#myElement").required = true;
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.
function hideNumberSpinner(): void;
$w("#myTextInput").hideNumberSpinner();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function onCustomValidation(validator: function, override: boolean): void;
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.
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.
$w("#myElement").onCustomValidation((value, reject) => {
if (value === "evil") {
reject("Evil is invalid");
}
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function showNumberSpinner(): void;
$w("#myTextInput").showNumberSpinner();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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
.
function delete(): Promise<void>
$w("#myElement").delete();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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()
.
function onChange(handler: function): Element;
handler(event: Event): void
The name of the function or
the function expression to run when the element's value changes.
$w("#myElement").onChange((event) => {
let newValue = event.target.value; // "new value"
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
Adds an event handler that runs when the pointer is moved onto the element.
function onMouseIn(handler: function): Element;
handler(event: MouseEvent): void
The name of the function or
the function expression to run when the pointer is moved onto the
element.
$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
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
Adds an event handler that runs when the pointer is moved off of the element.
function onMouseOut(handler: function): Element;
handler(event: MouseEvent): void
The name of the function or
the function expression to run when the pointer is moved off of
the element.
$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
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function onViewportEnter(handler: function): Element;
handler(event: Event): void
The name of the function or
the function expression to run when the element enters the viewport.
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function onViewportLeave(handler: function): Element;
handler(event: Event): void
The name of the function or
the function expression to run when the element leaves the viewport.
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function resetValidityIndication(): void;
$w("#myElement").resetValidityIndication();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
$w("#myElement").restore();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function scrollTo(): Promise<void>;
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function updateValidityIndication(): void;
$w("#myElement").updateValidityIndication();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function collapse(): Promise<void>;
$w("#myElement").collapse();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function expand(): Promise<void>;
$w("#myElement").expand();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function hide(effectName: string, effectOptions: union): Promise<void>;
The name of the effect to play when hiding the item.
The effect's options.
$w("#myElement").hide();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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 Value | Editor 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:
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
.show()
and hide()
with Hide and Show in Wix Studio.function show(effectName: string, effectOptions: union): Promise<void>;
The name of the effect to play when showing the item.
The effect's options.
$w("#myElement").show();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function disable(): Promise<void>;
$w("#myElement").disable();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function enable(): Promise<void>;
$w("#myElement").enable();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function onInput(eventHandler: function): Element;
eventHandler(event: Event): void
The name of the function or
the function expression to run when the input element receives
input.
$w("#myElement").onInput((event) => {
let newValue = event.target.value; // "newValue"
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function onKeyPress(eventHandler: function): Element;
eventHandler(event: KeyboardEvent): void
The name of the function or
the function expression to run when a key is pressed.
$w("myElement").onKeyPress((event) => {
let key = event.key; // "a"
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function blur(): void;
$w("#myElement").blur();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function focus(): void;
$w("#myElement").focus();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function onBlur(handler: function): Element;
handler(event: Event): void
The name of the function or
the function expression to run when the element loses focus.
$w("#myElement").onBlur((event) => {
let targetId = event.target.id; // "myElement"
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function onFocus(handler: function): Element;
handler(event: Event): void
The name of the function or
the function expression to run when the element receives focus.
$w("#myElement").onFocus((event) => {
let targetId = event.target.id; // "myElement"
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function onClick(handler: function): Element;
handler(event: MouseEvent): void
The name of the function or
the function expression to run when the element is clicked.
$w("#myElement").onClick((event) => {
let targetId = event.target.id; // "myElement"
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function onDblClick(handler: function): Element;
handler(event: MouseEvent): void
The name of the function or
the function expression to run when the element is clicked.
$w("#myElement").onDblClick((event) => {
let targetId = event.target.id; // "myElement"
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.