jQuery Password Input API

Name Type Default

disabled Boolean false

Gets or sets whether the widget is disabled.

Code example

Initialize a jqxPasswordInput with the disabled property specified.

$('#jqxPasswordInput').jqxPasswordInput({ disabled: true });

Try it: disabled is set to true

height Number/String "auto"

Gets or sets the widget's height. The value may be "auto", a number or a string like "Npx", where N is a number.

Code example

Initialize a jqxPasswordInput with the height property specified.

$('#jqxPasswordInput').jqxPasswordInput({ height: 25 });

Try it: height is set to '25px'

localization Object

Sets the various text values used in the widget. Useful for localization.

Default value:

{ passwordStrengthString: "Password strength", tooShort: "Too short", weak: "Weak", fair: "Fair", good: "Good", strong: "Strong" }

Code example

Initialize a jqxPasswordInput with the localization property specified.

$('#jqxPasswordInput').jqxPasswordInput({ localization: { passwordStrengthString: "חוזק סיסמא", tooShort: "קצר מדי", weak: "חלש", fair: "הוגן", good: "טוב", strong: "חזק"} });

Try it: localization is set to a custom object

maxLength Number null

Gets or sets the maximal number of characters in the password.

Code example

Initialize a jqxPasswordInput with the maxLength property specified.

$('#jqxPasswordInput').jqxPasswordInput({ maxLength: "none" });

Try it: maxLength is set to 7

placeHolder String null

Gets or sets the password input's placeholder text.

Code example

Initialize the widget with the placeHolder property specified.

$('#jqxPasswordInput').jqxPasswordInput({ placeHolder: "Enter password:" });

Try it: placeHolder is set to 'Enter a Password'

passwordStrength Function null

(Requires jqxtooltip.js.)

A callback function for defining a custom strength rule. The function has three parameters:

First parameter - the value of the password.
Second parameter - an object containing the numbers of different types of characters - letters, numbers and special keys.
Third parameter - the default strength value, based on the built-in rule.

Note: The property showStrength should be set to true for passwordStrength to have an effect.

Code example

Initialize a jqxPasswordInput with the passwordStrength property specified.

$("#jqxPasswordInput").jqxPasswordInput({ showStrength: true, passwordStrength: function (password, characters, defaultStrength) {
                var length = password.length;
                var letters = characters.letters;
                var numbers = characters.numbers;
                var specialKeys = characters.specialKeys;
                var strengthCoefficient = letters + numbers + 2 * specialKeys + letters * numbers * specialKeys;
                var strengthValue;
                if (length < 4) {
                    strengthValue = "Too short";
                } else if (strengthCoefficient < 10) {
                    strengthValue = "Weak";
                } else if (strengthCoefficient < 20) {
                    strengthValue = "Fair";
                } else if (strengthCoefficient < 30) {
                    strengthValue = "Good";
                } else {
                    strengthValue = "Strong";
                };
                return strengthValue;
            }
            });

Try it: passwordStrength is set to a custom function

rtl Boolean false

Determines whether the right-to-left support is enabled.

Code example

Initialize a jqxPasswordInput with the rtl property specified.

$('#jqxPasswordInput').jqxPasswordInput({ rtl: true });

Try it: rtl is set to true

strengthColors Object

Sets the the colors used in the tooltip which shows the strength.

Default value:

{ tooShort: "rgb(170, 0, 51)", weak: "rgb(170, 0, 51)", fair: "rgb(255, 204, 51)", good: "rgb(45, 152, 243)", strong: "rgb(118, 194, 97)" }

Code example

Initialize a jqxPasswordInput with the strengthColors property specified.

$('#jqxPasswordInput').jqxPasswordInput({ strengthColors: { tooShort: "Red", weak: "Red", fair: "Yellow", good: "Blue", strong: "Green" } });

Try it: strengthColors is set to a custom object

showStrength Boolean true

(Requires jqxtooltip.js.)

Gets or sets whether a tooltip which shows the password's strength will be shown.

Code example

Initialize a jqxPasswordInput with the showStrength property specified.

$('#jqxPasswordInput').jqxPasswordInput({ showStrength: true });

Try it: showStrength is set to false

showStrengthPosition String "right"

(Requires jqxtooltip.js.)

Gets or sets the position of the tooltip which shows the password strength.
Possible values:

"top"
"bottom"
"left"
"right"

Note: The property showStrength should be set to true for showStrengthPosition to have an effect.

Code example

Initialize a jqxNavigationBar with the showStrengthPosition property specified.

$('#jqxPasswordInput').jqxPasswordInput({ showStrengthPosition: "none" });

Try it: showStrengthPosition is set to 'left'

strengthTypeRenderer Function null

(Requires jqxtooltip.js.)

A callback function for custom rendering of the tooltip which shows the password strength. The function has three parameters:

First parameter - the value of the password.
Second parameter - an object containing the numbers of different types of characters - letters, numbers and special keys.
Third parameter - the default strength value, based on the built-in rule.

Note: The property showStrength should be set to true for strengthTypeRenderer to have an effect.

Code example

Initialize a jqxPasswordInput with the strengthTypeRenderer property specified.

$("#jqxPasswordInput").jqxPasswordInput({ showStrength: true, strengthTypeRenderer: function (password, characters, defaultStrength) {
                var length = password.length;
                var letters = characters.letters;
                var numbers = characters.numbers;
                var specialKeys = characters.specialKeys;
                var strengthCoefficient = letters + numbers + 2 * specialKeys + letters * numbers / 2 + length;
                var strengthValue;
                var color;
                if (length < 8) {
                    strengthValue = "Too short";
                    color = "rgb(170, 0, 51)";
                } else if (strengthCoefficient < 20) {
                    strengthValue = "Weak";
                    color = "rgb(170, 0, 51)";
                } else if (strengthCoefficient < 30) {
                    strengthValue = "Fair";
                    color = "rgb(255, 204, 51)";
                } else if (strengthCoefficient < 40) {
                    strengthValue = "Good";
                    color = "rgb(45, 152, 243)";
                } else {
                    strengthValue = "Strong";
                    color = "rgb(118, 194, 97)";
                };
                return "<div style='color: " + color + ";'>" + strengthValue + "</div>";
            }
            });

Try it: strengthTypeRenderer is set to a custom function

showPasswordIcon Boolean true

Gets or sets whether the Show/Hide password icon will appear.

Code example

Initialize a jqxPasswordInput with the showPasswordIcon property specified.

$('#jqxPasswordInput').jqxPasswordInput({ showPasswordIcon: false });

Try it: showPasswordIcon is set to false

theme String ''

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

Include the theme's CSS file after jqx.base.css.
The following code example adds the 'energyblue' theme.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"
                                    type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css"
                                    type="text/css" />

Set the widget's theme property to 'energyblue' when you initialize it.
```
$('#jqxPasswordInput').jqxPasswordInput({ theme: "energyblue" });
```

Try it: theme is set to 'energyblue'

width Number/String "auto"

Gets or sets the widget's width. The value may be "auto", a number or a string like "Npx", where N is a number.

Code example

Initialize a jqxPasswordInput with the width property specified.

$('#jqxPasswordInput').jqxPasswordInput({ width: "150px" });

Try it: width is set to '250px'

change Event

This event is triggered when the value in the input is changed.

Code example

Bind to the change event by type: jqxPasswordInput.


                                $('#jqxPasswordInput').on('change', function (event)
                                { 
                                  // type 
                                  var type = event.args.type; // keyboard, mouse or null depending on how the value was changed. 
                                });

Try it: Bind to the change event by type: jqxPasswordInput.

render Method

Renders the widget.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the render method.

$('#jqxPasswordInput').jqxPasswordInput('render');

Try it: renders the jqxPasswordInput.

refresh Method

Refreshes the widget.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the refresh method.

$('#jqxPasswordInput').jqxPasswordInput('refresh');

Try it: refresh the jqxPasswordInput.

val Method

Gets or sets the password. If the parameter is set, sets the value of the password in the input. If there is no parameter set, returns the string value of the password.

Parameter	Type	Description
value	String

Return Value
String

Code example

Invoke the val method.

// @param String. The new value of the password.
$('#jqxPasswordInput').jqxPasswordInput('val', "New password");

var password = $('#jqxPasswordInput').jqxPasswordInput('val');

Try it: sets new value of the jqxPasswordInput.

Properties

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Events

Code example

Methods

Code example

Code example

Code example