|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { disabled:true, theme: "light" } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
height
|
number
|
"auto"
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { theme: "light" } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
localization
|
object
|
{ passwordStrengthString: 'Password strength', tooShort: 'Too short', weak: 'Weak', fair: 'Fair', good: 'Good', strong: 'Strong' }
|
Sets or gets the localization property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { localization:localization, theme: "light" } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
maxLength
|
number
|
null
|
Sets or gets the maxLength property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { maxLength:7, theme: "light" } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
placeHolder
|
string
|
null
|
Sets or gets the placeHolder property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { placeHolder: "Enter a Password", theme:"light" } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
passwordStrength
|
function
|
null
|
Sets or gets the passwordStrength property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { passwordStrength: "passwordStrength", theme:"light" } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { rtl:true, theme: "light" } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
strengthColors
|
object
|
{ 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)' }
|
Sets or gets the strengthColors property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { showStrength:true, strengthColors: '{ tooShort: "Red", weak: "Red", fair: "Yellow", good: "Blue", strong: "Green" }', theme:"light" } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
showStrength
|
boolean
|
true
|
Sets or gets the showStrength property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { showStrength:true, theme: "light" } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
showStrengthPosition
|
string
|
"right"
|
Sets or gets the showStrengthPosition property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { showStrength:true, showStrengthPosition: "left", theme:"light" } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
strengthTypeRenderer
|
function
|
null
|
Sets or gets the strengthTypeRenderer property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { strengthTypeRenderer: "strengthTypeRenderer", theme:"light" } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
showPasswordIcon
|
boolean
|
true
|
Sets or gets the showPasswordIcon property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { showPasswordIcon:false, theme: "light" } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { theme: "light" } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
width
|
number
|
"auto"
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { theme: "light" } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
|
|
change
|
Event
|
|
Code examples
Bind to the change event of jqxPasswordInput.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { } window.onload = function() { document.querySelector( "jqx-password-input").addEventListener("change", function(event) { // Your code here. }); }; </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
|
|
render
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { } window.onload = function() { document.querySelector( "jqx-password-input").render(); } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
refresh
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { } window.onload = function() { document.querySelector( "jqx-password-input").refresh(); } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
|
val
|
Method
|
|
| Parameter |
Type |
Description |
| value |
string |
|
Return Value
String
<!DOCTYPE html><html lang="en"><head> <title id='Description'>PasswordInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpasswordinput.js"></script> <script> JQXElements.settings[ "inputSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-password-input").val(); } </script></head><body> <jqx-password-input settings="inputSettings"></jqx-password-input>
|
