Question

下载showPassword jQuery plugin，启用复选框以屏蔽和取消屏蔽密码字段。功能按预期工作，但选中复选框后，它会将密码字段大小更改回默认值。取消选中此复选框会使密码字段大小切换回HTML中指定的任何内容（在我的情况下为35，默认为20）。

如果你在密码字段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);

Answer 1

这个插件所做的就是在密码字段旁边添加一个隐藏的输入字段。选中此框后，该值将从一个字段复制到另一个字段，密码字段将被隐藏，并显示添加的字段。

您需要为密码字段和新添加的字段添加大小。

添加的输入字段具有spin_xxx类（其中xxx是随机数）。所以，这样的事情应该有效：

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

在调用.showPassword后运行此行。

Answer 2

您可以使用以下方法自行完成此功能：

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

显示密码jQuery插件更改密码字段的长度

2 个答案: