PasswordInput JAVASCRIPT UI Component API

PasswordInput Javascript API

Class

PasswordInput

PasswordInput

PasswordInput specifies a password field where the user can enter data. It is similar to the password text box, but this component does not have additional functionality for tooltips and popups.

Selector

smart-password-input

Properties

DdisabledDetermines whether the element is interactive or inactive. When enabled, the element can be used and respond to user actions; when disabled, the element is not interactive and will not respond to user input.
UunlockKeySets or retrieves the unlockKey, a unique identifier or code required to unlock and grant access to the product’s features or content.
LlocaleSpecifies or retrieves the current language setting. This property is typically used together with the messages property to provide localization support, determining which set of translated messages or labels are displayed based on the selected language code (e.g., 'en', 'fr', 'es').
LlocalizeFormatFunctionSpecifies a callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this callback to modify or enhance how localized strings are generated or displayed before they are delivered to your application.
MmessagesDefines or retrieves an object containing text strings used throughout the widget interface, enabling support for localization. This property works together with the locale property to display the widget's content in different languages by providing translations for UI elements such as labels, messages, and tooltips.
MminLengthSpecifies the minimum number of characters a user must type into the input field before the autocomplete feature activates. Once this threshold is reached, the dropdown will open and display a list of items that match the entered text.
NnameSpecifies or retrieves the value of the element's name attribute. The name attribute is used to identify form fields when submitting data via an HTML form, allowing the data to be sent as key-value pairs where the name serves as the key. This attribute is essential for server-side processing and differentiating between multiple inputs within the same form.
PplaceholderSpecifies the placeholder text displayed inside the input field when it is empty, providing a hint or example of the expected input value.
RrightToLeftSets or retrieves a value that specifies whether the element's alignment is configured to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, this ensures that text direction and layout are adjusted appropriately for locales that use RTL scripts.
TthemeSpecifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, spacing, and stylistic details, ensuring a consistent look and feel across elements.
UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it unreachable via the keyboard (e.g., Tab key) and inaccessible by assistive technologies that rely on focus.
VvalueSets a new value for the element or retrieves the current value of the element, depending on how the method or property is used. This is commonly used for form elements such as input fields, textareas, or select elements, allowing you to programmatically update or access their contents.

Events

CchangeThis event is triggered when the value of the element has been modified by the user and the element loses focus (i.e., when the user finishes editing and clicks or tabs away from the element).
CchangingThis event is triggered each time a key is released within the PasswordInput field, but only if the input value has changed as a result of the key press.

Methods

SselectEnhances the input field interaction by selecting all text within the input when it is editable. If the input is set to readonly, the element receives focus without selecting its text. This ensures intuitive behavior based on the input's current state.

Properties

disabledboolean

Determines whether the element is interactive or inactive. When enabled, the element can be used and respond to user actions; when disabled, the element is not interactive and will not respond to user input.

Default value

false
Try a demo showcasing the disabled property.

Example

Set the disabled property. 

 <smart-password-input disabled></smart-password-input>

Set the disabled property by using the HTML Element's instance. 

 const passwordinput = document.querySelector('smart-password-input');
 passwordinput.disabled = false;

Get the disabled property. 

 const passwordinput = document.querySelector('smart-password-input');
 let disabled = passwordinput.disabled;

unlockKeystring

Sets or retrieves the unlockKey, a unique identifier or code required to unlock and grant access to the product’s features or content.

Default value

""

Example

Set the unlockKey property. 

 <smart-password-input unlock-key=''></smart-password-input>

Set the unlockKey property by using the HTML Element's instance. 

 const passwordinput = document.querySelector('smart-password-input');
 passwordinput.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property. 

 const passwordinput = document.querySelector('smart-password-input');
 let unlockKey = passwordinput.unlockKey;

localestring

Specifies or retrieves the current language setting. This property is typically used together with the messages property to provide localization support, determining which set of translated messages or labels are displayed based on the selected language code (e.g., 'en', 'fr', 'es').

Default value

"en"

Example

Set the locale property. 

 <smart-password-input locale='de'></smart-password-input>

Set the locale property by using the HTML Element's instance. 

 const passwordinput = document.querySelector('smart-password-input');
 passwordinput.locale = 'en';

Get the locale property. 

 const passwordinput = document.querySelector('smart-password-input');
 let locale = passwordinput.locale;

localizeFormatFunctionfunction

Specifies a callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this callback to modify or enhance how localized strings are generated or displayed before they are delivered to your application.

Example

Set the localizeFormatFunction property. 

 <smart-password-input localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-password-input>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const passwordinput = document.querySelector('smart-password-input');
 passwordinput.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property. 

 const passwordinput = document.querySelector('smart-password-input');
 let localizeFormatFunction = passwordinput.localizeFormatFunction;

messagesobject

Defines or retrieves an object containing text strings used throughout the widget interface, enabling support for localization. This property works together with the locale property to display the widget's content in different languages by providing translations for UI elements such as labels, messages, and tooltips.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."

}

Example

Set the messages property. 

 <smart-password-input messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","invalidNode":"{{elementType}}: Ungultiger Parameter '{{node}}' beim Aufruf von {{method}}."}}'></smart-password-input>

Set the messages property by using the HTML Element's instance. 

 const passwordinput = document.querySelector('smart-password-input');
 passwordinput.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."}};

Get the messages property. 

 const passwordinput = document.querySelector('smart-password-input');
 let messages = passwordinput.messages;

minLengthnumber

Specifies the minimum number of characters a user must type into the input field before the autocomplete feature activates. Once this threshold is reached, the dropdown will open and display a list of items that match the entered text.

Default value

1

Example

Set the minLength property. 

 <smart-password-input min-length='2'></smart-password-input>

Set the minLength property by using the HTML Element's instance. 

 const passwordinput = document.querySelector('smart-password-input');
 passwordinput.minLength = 0;

Get the minLength property. 

 const passwordinput = document.querySelector('smart-password-input');
 let minLength = passwordinput.minLength;

namestring

Specifies or retrieves the value of the element's name attribute. The name attribute is used to identify form fields when submitting data via an HTML form, allowing the data to be sent as key-value pairs where the name serves as the key. This attribute is essential for server-side processing and differentiating between multiple inputs within the same form.

Default value

""

Example

Set the name property. 

 <smart-password-input name='passwordAccount1'></smart-password-input>

Set the name property by using the HTML Element's instance. 

 const passwordinput = document.querySelector('smart-password-input');
 passwordinput.name = 'passwordAccount2';

Get the name property. 

 const passwordinput = document.querySelector('smart-password-input');
 let name = passwordinput.name;

placeholderstring

Specifies the placeholder text displayed inside the input field when it is empty, providing a hint or example of the expected input value.

Default value

""

Example

Set the placeholder property. 

 <smart-password-input placeholder='Empty'></smart-password-input>

Set the placeholder property by using the HTML Element's instance. 

 const passwordinput = document.querySelector('smart-password-input');
 passwordinput.placeholder = 'Enter:';

Get the placeholder property. 

 const passwordinput = document.querySelector('smart-password-input');
 let placeholder = passwordinput.placeholder;

rightToLeftboolean

Sets or retrieves a value that specifies whether the element's alignment is configured to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, this ensures that text direction and layout are adjusted appropriately for locales that use RTL scripts.

Default value

false

Example

Set the rightToLeft property. 

 <smart-password-input right-to-left></smart-password-input>

Set the rightToLeft property by using the HTML Element's instance. 

 const passwordinput = document.querySelector('smart-password-input');
 passwordinput.rightToLeft = true;

Get the rightToLeft property. 

 const passwordinput = document.querySelector('smart-password-input');
 let rightToLeft = passwordinput.rightToLeft;

themestring

Specifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, spacing, and stylistic details, ensuring a consistent look and feel across elements.

Default value

""

Example

Set the theme property. 

 <smart-password-input theme='blue'></smart-password-input>

Set the theme property by using the HTML Element's instance. 

 const passwordinput = document.querySelector('smart-password-input');
 passwordinput.theme = 'red';

Get the theme property. 

 const passwordinput = document.querySelector('smart-password-input');
 let theme = passwordinput.theme;

unfocusableboolean

When set to true, this property prevents the element from receiving keyboard focus, making it unreachable via the keyboard (e.g., Tab key) and inaccessible by assistive technologies that rely on focus.

Default value

false

Example

Set the unfocusable property. 

 <smart-password-input unfocusable></smart-password-input>

Set the unfocusable property by using the HTML Element's instance. 

 const passwordinput = document.querySelector('smart-password-input');
 passwordinput.unfocusable = false;

Get the unfocusable property. 

 const passwordinput = document.querySelector('smart-password-input');
 let unfocusable = passwordinput.unfocusable;

valuestring

Sets a new value for the element or retrieves the current value of the element, depending on how the method or property is used. This is commonly used for form elements such as input fields, textareas, or select elements, allowing you to programmatically update or access their contents.

Default value

""

Example

Set the value property. 

 <smart-password-input value='value1'></smart-password-input>

Set the value property by using the HTML Element's instance. 

 const passwordinput = document.querySelector('smart-password-input');
 passwordinput.value = 'value2';

Get the value property. 

 const passwordinput = document.querySelector('smart-password-input');
 let value = passwordinput.value;

Events

changeCustomEvent

This event is triggered when the value of the element has been modified by the user and the element loses focus (i.e., when the user finishes editing and clicks or tabs away from the element).

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.oldValue - The previous value.
ev.detail.value - The new value.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event. 

const passwordinput = document.querySelector('smart-password-input');
passwordinput.addEventListener('change', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

changingCustomEvent

This event is triggered each time a key is released within the PasswordInput field, but only if the input value has changed as a result of the key press.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onChanging

Arguments

evCustomEvent
ev.detailObject
ev.detail.oldValue - The previous value before it was changed.
ev.detail.value - The new value.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of changing event. 

const passwordinput = document.querySelector('smart-password-input');
passwordinput.addEventListener('changing', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

Methods

select(): void

Enhances the input field interaction by selecting all text within the input when it is editable. If the input is set to readonly, the element receives focus without selecting its text. This ensures intuitive behavior based on the input's current state.


Invoke the select method.

const passwordinput = document.querySelector('smart-password-input');
passwordinput.select();