Have you ever had to sign in to a website, and wanted to be able to see the password as you type it? Maybe you don’t have Mr. Evil looking over your shoulder, and seeing your password would help you know if you had typed it in correctly. I had seen such functionality on a website in the past, and this week I decided to create a jQuery plugin for use on my customer’s websites. I actually searched the internet for such a plugin, and came across a few, but for various reasons decided they were not right for me. With help from some of the forum members at SitePoint, I came up with a solution that worked in all modern browsers, and met my needs. Feel free to download the plugin and use it. The plugin works in the latest versions of Firefox, Chrome, Opera, Safari, and Internet Explorer, as well as Internet Explorer 7 and Internet Explorer 8 (Sorry, I didn’t check IE6).
Example Usage:
<!-- in document head -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="js/jquery.passwordToggle-1.1.1.js"></script>
<script>
$(document).ready(function(){
$('#my-checkbox').passwordToggle();
$('#my-checkbox').passwordToggle({target:'#password2'});
});
</script>
<!-- in document body -->
<label for="password">Password</label>
<input id="password" type="password" name="password" value=""/>
<br />
<label for="password2">Confirm Password</label>
<input id="password2" type="password" name="password2" value=""/>
<br />
<label for="my-checkbox">Toggle Password Visibility</label>
<input id="my-checkbox" type="checkbox"/>
A very simple example is included in the download: Download v1.2.1