"Change password field into text to hide show value"
Bootstrap 4.1.1 Snippet by abhijeetka

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-sm-4">
<label>Current Password</label>
<div class="form-group pass_show">
<input type="password" value="@abhi$123" class="form-control" placeholder="Current Password">
</div>
<label>New Password</label>
<div class="form-group pass_show">
<input type="password" value="@abhi$123" class="form-control" placeholder="New Password">
</div>
<label>Confirm Password</label>
<div class="form-group pass_show">
<input type="password" value="@abhi$123" class="form-control" placeholder="Confirm Password">
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.pass_show{position: relative}
.pass_show .ptxt {
position: absolute;
top: 50%;
right: 10px;
z-index: 1;
color: #f36c01;
margin-top: -10px;
cursor: pointer;
transition: .3s ease all;
}
.pass_show .ptxt:hover{color: #333333;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
$('.pass_show').append('<span class="ptxt">Show</span>');
});
$(document).on('click','.pass_show .ptxt', function(){
$(this).text($(this).text() == "Show" ? "Hide" : "Show");
$(this).prev().attr('type', function(index, attr){return attr == 'password' ? 'text' : 'password'; });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Awesome Landing Page
Creating password field text hide show via a single class
Extend form field beyond parent
Bootstrap Images to Left and Right with Text and Heading

Questions / Comments: