Bootstrap – Show/Hide(toggle) Password input field using bootstrap-show-password.js Plugin

Bootstrap – Show/Hide(toggle) Password input field using bootstrap-show-password.js Plugin

In this post we will give you information about Bootstrap – Show/Hide(toggle) Password input field using bootstrap-show-password.js Plugin. Hear we will give you detail about Bootstrap – Show/Hide(toggle) Password input field using bootstrap-show-password.js PluginAnd how to use it also give you demo for it if it is necessary.

Sometimes, we may require to hide show password input field so, user can see what he written in password in register form or any other form. So, If you used Bootstrap framework then you can simply do it by using bootstrap-show-password.js plugin.

Bootstrap show Password plugin give us to good layout and with we can also custom set class when password hide or show. We can also set toggle hide show password input field.

In this full example i use bootstrap-show-password.js plugin for hide show password field. You can sole use this example simply by bellow small example.

Preview:

Example:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Hide Show Password</title>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>

</head>

<body>


<div >

<form>

<div >

<label>Username:</label>

<input type="text" name="username" >

</div>

<div >

<label>Password:</label>

<input type="password" id="password" name="password" data-toggle="password">

</div>

<div >

<button >Submit</button>

</div>

</form>

</div>


<script type="text/javascript">

$("#password").password('toggle');

</script>


</body>

</html>

Ok, you can copy bellow code and run in your machine OR also you can check demo by click on eye icon.

You can get more information about bootstrap-show-password plugin from here : Click Here.

Maybe It can help you…

Hope this code and post will helped you for implement Bootstrap – Show/Hide(toggle) Password input field using bootstrap-show-password.js Plugin. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

82  +    =  89

We accept paid advance and paid guest Posting on our Site : Contact US