PasswordInput JAVASCRIPT UI Component API

PasswordInput Javascript API

Class

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.

Properties

disabledboolean

Enables or disables the element.

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;

localestring

Sets or gets the language. Used in conjunction with the property messages.

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

Callback used to customize the format of the messages that are returned from the Localization Module.

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

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

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

Determines the minimum number of characters inside the input in order to trigger the autocomplete functionality that will open the drop down and show the matched items.

Default value

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

Sets or gets the name attribute for the element. Name is used when submiting data inside an HTML 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

Determines the placeholder of the input.

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 gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

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

Determines the theme for the element. Themes define the look of the 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

If is set to true, the element cannot be focused.

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 or gets the value of the element.

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 is changed and the focus moved out of 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 on each key up event of the PasswordInput, if the value is changed.

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

Selects the text inside the input or if it is readonly then the element is focused.

Invoke the select method.

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