Плагин Show Password jQuery меняет длину поля пароля

Question

Загружен плагин showPassword jQuery , который позволяет установить флажок для маскировки и снятия маски поля пароля. Функциональность работает должным образом, но когда флажок установлен, он меняет размер поля пароля на значение по умолчанию Снятие флажка заставляет размер поля пароля переключаться обратно на то, что указано в 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");
});