title: Show Password jQuery plugin changes length of password field
body: <p>Downloaded the <a href="http://www.prothemer.com/blog/research-and-development/new-jquery-plugin-targeting-usability-for-password-masking-on-forms/" rel="nofollow">showPassword jQuery plugin</a> that enables a check box to mask and unmask a password field.  Functionality works as expected but when the check box is checked it changes the password field size back to default.  Unchecking the check box makes the password field size switch back to whatever is specified in the HTML (35 in my case, 20 is default).</p>
  
  <p>The demo that comes in the plugin download does the exact same thing if you add a size to the password field HTML, so it's definitely a problem with the plugin's code and not my HTML.  Unfortunately my limited knowledge of Javascript/jQuery is not enough to diagnose why this plugin changes the password field length based on the status of the check box. Below is the entire code for the plugin, thanks a lot.</p>
  
  <pre><code>;(function($){
  $.fn.showPassword = function(ph, options){
  
      var spinput = $(this);
  
      $.fn.showPassword.checker = function(cbid, inid){
          $('input[id="'+cbid+'"]').click(function(){
              if($(this).attr('checked')){
                  $('input.'+inid).val(spinput.val()).attr('id', spinput.attr('id')).attr('name',spinput.attr('name'));
                  $('input.'+inid).css('display', 'inline');
                  spinput.css('display', 'none').removeAttr('id').removeAttr('name');
              }else{
                  spinput.val($('input.'+inid).val()).attr('id', $('input.'+inid).attr('id')).attr('name', $('input.'+inid).attr('name'));
                  spinput.css('display', 'inline');
                  $('input.'+inid).css('display', 'none').removeAttr('id').removeAttr('name');
              }
          });
      }
  
      return this.each(function(){
          var def = { classname: 'class', name: 'password-input', text: 'Show Password' };
          var spcbid = 'spcb_' + parseInt(Math.random() * 1000);
          var spinid = spcbid.replace('spcb_', 'spin_');
          if (spinput.attr('class') !== '') { var spclass = spinid+' '+spinput.attr('class'); }else{ var spclass = spinid; }
          if(typeof ph == 'object'){ $.extend(def, ph); }
          if(typeof options == 'object'){ $.extend(def, options); }
          var spname = def.name;
          // define the class name of the object
          if(def.classname==''){ theclass=''; }else{ theclass=' class="'+def.clasname+'"'; }
          // build the checkbox
          $(this).before('&lt;input type="text" value="" class="'+spclass+'" style="display: none;" /&gt;');
          var thecheckbox = '&lt;label&gt;&lt;input'+theclass+' type="checkbox" id="'+spcbid+'" name="'+spname+'" value="sp" /&gt;'+def.text+'&lt;/label&gt;';
          // check if there is a request to place the checkbox in a specific placeholder. 
          // if not, place directly after the input.
          if(ph == 'object' || typeof ph == 'undefined'){ $(this).after(thecheckbox); }else{ $(ph).html(thecheckbox); }
          $.fn.showPassword.checker(spcbid, spinid);
          return this;
      });
  }
  })(jQuery);
  </code></pre>