With some help from a forum member, I got the functionality of this plugin working tonight. It allows for a checkbox or link to make the password field of a form show the hidden characters, because sometimes it’s nice to see them. I turned it into a plugin, and because I still consider myself a beginner with javascript, I thought I’d ask for a review so hopefully I can learn something. I tested it in FF5, IE7, IE8, IE9, Latest Opera, Latest Chrome, and Latest Safari.
(function($){
$.fn.passwordToggle = function(options) {
/* Set defaults */
var defaults = {
target: '#password',
extra_attr: ''
};
/* Override defaults with options */
var options = $.extend(defaults, options);
// Register the click event on the trigger
$(this).bind('click', function(e){
// Prevent default in case trigger is a link
e.preventDefault();
// Get the value
var current_password = $(options.target).val();
// Get the type
var current_type = $(options.target).attr('type');
// Get the ID
var current_id = $(options.target).attr('id');
// Determine the replacement type
if( current_type == 'text' ){
var replacement_type = 'password';
}else{
var replacement_type = 'text';
}
// Build the replacement
var replacement = '<input id="' + current_id + '" type="' + replacement_type + '" value="' + current_password + '"';
if(options.extra_attr != ''){
replacement += options.extra_attr;
}
replacement += '/>';
// Do the replacement
$(options.target).replaceWith(replacement);
});
}
})(jQuery);
I saw some areas which could be shorten and improved on so i made a jsFiddle so you can see them live and in action.
Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
Let me know if you have any questions and i would be happy to answer them 
I really like the way you built the new input element:
var $new = $('<input />', {
type : type,
value : field.value,
id : field.id,
'class' : field._class
});
One thing that I was thinking about was using .each() or another function to get all current attributes, and then transferring them to the new input element, changing the type of course.
Thanks for taking the time to make some recommendations. I appreciate it.
I have a similar script that could be modified to do the same thing but with a LOT less code at Self Labelling Password Fields - for those who don’t want the overhead of needing jQuery in order to do something that can be done with about the same amount of ordinary JavaScript.
The only difference is my script simply has what the field is displayed in it at the start rather than toggling the display - but most of the code required to toggle the display is already in my script.I t always amazes me how many scripts I see using libraries where the code that has been added to perform the processing using the library is as long or longer than the code that could be used to do the same thing without the library.
@skunkbad: No problem, i also had the same thought about loop through the valid attributes but felt it was not needed because i rarely see more then those 4 been used.
@felgall: That’s a nice little script there, when i was doing some tests last night i couldn’t get jQuery to change the type of the field but now i see the solution behind that
I have updated the jsFiddle so it uses an onfocus event to allow for the type attribute to be changed.
Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
@felgall - I guess for me, and probably a lot of people that use jquery, is is that it’s easy to understand, the documentation is simple, and for my level of experience with javascript, it’s like a pair of crutches. When I look at your code… it might as well be in Chinese, because it’s totally different than what I’m used to. It’s been my long time desire to learn more about javascript though, so I do appreciate the response. I’ll definitely study your code and try to understand it.
@SgtLegend - When I tried your updated jsFiddle in IE7 and IE8, it didn’t work anymore! I do have a question about the last version though. When you were collecting attributes, you put an underscore in front of class. Is this because class is a reserved variable/word in jQuery or javascript?
Yes it’s because class is a reserved word in JavaScript, i am currently looking into why the code won’t work in IE 7/8.
EDIT: Found the reason behind IE been stubborn, again IE 8 and below has what’s referred to as a read/write once only policy. Because of this it’s not possible to set the type property once the element exists in the DOM, to fix this i had to refer back to the first snippet of code i used.
That newest version is very nice! It was impossible for me to find a jQuery plugin that did this, so hopefully other people who are looking for this will find your jsFiddle page. Do the jsFiddle pages last forever?
I believe so but jsFiddle is still considered as BETA software so who knows what will happen when they hit the RC stages.
Do you think there is a way to use something other than focus()? It’s just kind of weird that it applies the focus to the input, and if there is more than one password field, such as when a Confirm Password field is used, it applies the focus to the second input.
Maybe blur()?
Further testing shows that in IE7 and IE8, the post vars are missing if the password was shown/hid. This is on a standard submit, not one using ajax or javascript. What do you think is the solution?
I figured it out. I just needed to make sure the new element has a name attribute!