How to Start
Upload strong-password folder to the server.
Include strong-password.min.css, strong-password.min.js, jQuery files in your <head> section of the page:
<link rel="stylesheet" href="strong-password/css/strong-password.min.css">
<script type="text/javascript" src="lib/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="strong-password/js/strong-password.min.js"></script>
Plug strongPassword plugin to you password field in the script:
$('input[type=password]').strongPassword();
You can use options:
var options = {
cssClass: 'sp-black',
backdrop: false
// other options...
}
$('input[type=password]').strongPassword(options);
Options
afterHide(element)
The callback function that will be called after the plugin is removed
Example
$('input[name=password]').strongPassword({
afterHide: function(el) {
el.one('click', function() {
el.blur();
});
}
});
animation
Specifies the type of animation (css transition)
Example
$('input[name=password]').strongPassword({
animation: 'none' //no animation
});
arrow
Specifies whether to use the arrow element or not
Example
$('input[name=password]').strongPassword({
arrow: false
});
backdrop
Specifies whether to use the backdrop or not
Example
$('input[name=password]').strongPassword({
backdrop: false
});
buttons
buttons: {
regen: 'Renew',
ok: 'Apply',
cancel: 'Cancel'
}
Specifies names of buttons
Example
$('input[name=password]').strongPassword({
buttons: {
regen: 'New',
ok: 'Ok',
cancel: 'Close'
}
});
cssClass
If defined, specifies the css class that will be added to the popover element. You can use predefined 'sp-black' class or develope your own css class.
Example
$('input[name=password]').strongPassword({
cssClass: 'sp-black'
});
firstVowel
Prepends a random vovel to the result with probability of 50%
Example
$('input[name=password]').strongPassword({
firstVowel: true
});
followClick
Specifies whether the arrow element must be placed to the point with coordinates of a click.
Example
$('input[name=password]').strongPassword({
placement: 'vertical',
followClick: false
});
height
Height of the popover element.
lastConsonant
Appends a random consonant to the result with probability of 50%
Example
$('input[name=password]').strongPassword({
lastConsonant: true
});
offset
offset: {
top: 0,
left: 0
}
Specifies an offset of the popover element
Example
$('input[name=password]').strongPassword({
offset: {
top: 40,
left: 50
}
});
onHide (popover)
The callback function that will be called when the popover is hiding
Example
$('input[name=password]').strongPassword({
onHide: function(popover) {
popover.css('border', '4px solid red');
}
});
placement
The placement of the popover element
Example
$('input[name=password]').strongPassword({
placement: 'right'
});
range
If defined, the number of sounds will calculated in a range from the first element to the second element
Example
$('input[name=password]').strongPassword({
range: [3,5]
});
sounds
The number of sounds in the password
Example
$('input[name=password]').strongPassword({
sounds: 3
});
visibleTime
Time in ms during which the password in a form field will be visible
Example
$('input[name=password]').strongPassword({
visibleTime: 5000
});
width
Width of the popover element.