顯示密碼jQuery插件更改密碼字段的長度

下載了showPassword jQuery plugin，它使複選框可以屏蔽和取消屏蔽密碼字段。功能按預期工作，但當勾選複選框時，它將密碼字段大小更改回默認值。取消選中複選框會使密碼字段大小切換回HTML中指定的任何值（在我的例子中爲35，默認值爲20）。顯示密碼jQuery插件更改密碼字段的長度

插件下載中的演示程序完成同樣的事情，如果您向密碼字段HTML添加大小，所以這絕對是插件的代碼而不是我的HTML的問題。不幸的是，我對Javascript/jQuery的有限知識不足以診斷爲什麼此插件會根據複選框的狀態更改密碼字段長度。下面是插件的完整代碼，非常感謝。

;(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('<input type="text" value="" class="'+spclass+'" style="display: none;" />'); 
     var thecheckbox = '<label><input'+theclass+' type="checkbox" id="'+spcbid+'" name="'+spname+'" value="sp" />'+def.text+'</label>'; 
     // 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);

來源

2012-01-09 scrolls

所有這個插件做的是將旁邊的密碼字段一個隱藏的輸入字段。選中該框後，該值將從一個字段複製到另一個字段，並且密碼字段被隱藏，並顯示添加的字段。

您需要爲密碼字段和新添加的字段添加大小。

添加的輸入字段有一個類spin_xxx（其中xxx是一個隨機數）。所以，這樣的事情應該工作：

$('#passwordField').prev('input[class^="spin_"]').width(35);

運行這行調用.showPassword後。

來源

2012-01-09 19:16:10

你可以自己做這個功能有以下：

$('#checkbox').click(function() { 
    if ($('#checkbox').is(':checked')) 
     $('#password-field').attr("type", "password"); 
    else 
     $('#password-field').attr("type", "text"); 
});

來源

2012-01-09 18:45:59

您實際上不能更改輸入字段的類型屬性。 http://jsfiddle.net/SZFng/ – 2012-01-09 18:58:12

公平的話，我會有一個文本框出現在同一位置的密碼值在... – 2012-01-09 19:09:47

這是有點什麼這個插件。它添加了另一個輸入，複選框切換該輸入和原始密碼輸入。 – 2012-01-09 19:20:05

顯示密碼jQuery插件更改密碼字段的長度

回答

相關問題