SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [Code Review] jQuery plugin to toggle password visibility

    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.

    Code JavaScript:
    (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);

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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

  3. #3
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    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:
    Code JavaScript:
    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.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    @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)

  6. #6
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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?

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    http://jsfiddle.net/chrisupjohn/k3gjF/8/

  8. #8
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I believe so but jsFiddle is still considered as BETA software so who knows what will happen when they hit the RC stages.

  10. #10
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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()?

  11. #11
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  12. #12
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured it out. I just needed to make sure the new element has a name attribute!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •