password field text hide and show toggle

Your visitors might want to view their password.
On most sites there is no option to view it.
With this handy little tool visitors can view their password with a singe click and hide it also with one single click.

Example:


First we have to setup Bootstrap and jquery, Putt this in yoursection:

<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>

Now we have a little java-script to add:

$(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'; }); 
});  

And off course the css:

.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;} 

And finally the bootstrap code, putt this in your BODY of your page:

<div class="container">
	<div class="row">
		<div class="col-sm-12">
		    <label>Your Password:</label>
		    <div class="form-group pass_show"> 
                <input type="password" value="@my-very-secret-password" class="form-control" placeholder="Current Password"> 
            </div> 
		</div>  
	</div>
</div>

You can download the complete code below:

Download: password field text hide and show toggle
Clicks: 167, Filesize: 79 B, Date: 01 Sep. 2018


Leave a Reply

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