Bootstrap – Show or hide Password plugin


Bootstrap – Show or hide Password plugin

Show/hide password plugin for twitter bootstrap.

This plugin support bootstrap v2 and bootstrap v3.


The plugin acts on <input> elements (typically password fields):

<input id="password" class="form-control" type="password" data-toggle="password">

Via data attributes

<input data-toggle="password">

Via JavaScript



Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-message="Show/hide password".

Name Attribute type default description
data-toggle String password Active password without writing JavaScript.
placement data-placement String after The placement of show/hide icon, can be ‘before’ or ‘after’.
message data-message String Click here to show/hide password The tooltip of show/hide icon.
white data-white Boolean false Show the white icon. (Just work in bootstrap v2)



Manually show the password.



Manually hide the password.



Manually toggle the password.


.password(‘val’, [value]);

Get the current value of the password or set the value of password.

$('#password').password('val'); // get value
$('#password').password('val', 'password'); // set value


The plugin exposes a few events.

Event Type Description This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. This event is fired immediately when the hide instance method has been called.
$('#password').on('', function (e) {
    // code here

Website & Source Code:


Thanks for reading,
Web Editor


Please enter your comment!
Please enter your name here

20 − 18 =