"Creating password field text hide show via a single class "
Bootstrap 4.1.1 Snippet by faisalkhan123

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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="faisalkhan@123" class="form-control" placeholder="Current Password">
</div>
<label>New Password</label>
<div class="form-group pass_show">
<input type="password" value="faisal.khan@123" class="form-control" placeholder="New Password">
</div>
<label>Confirm Password</label>
<div class="form-group pass_show">
<input type="password" value="faisal.khan@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


Questions / Comments:

A best-in-class printer offers fast, high-quality prints, reliable connectivity, and advanced features like duplex printing and scanning. It's efficient, cost-effective, and ideal for both home and office use.

https://bootsnipp.com/fullscreen/1n0Mq

mansi8799 () - 4 months ago - Reply 0