Показать/скрыть пароль в форме ввода?

[deedjey]

Подскажите способ сделать кнопку в поле ввода пароля, чтобы можно было вместо звёздочек посмотреть введённые символы

 

[invader]

<input id="pass" class="" type="password" alt="" placeholder="Пароль"/>
<label><input onchange="if ($('#pass').get(0).type=='password') $('#pass').get(0).type='text'; else $('#pass').get(0).type='password';" name="goto" type="checkbox" value="false">Показать</label>

 

[yr4ik_07]

я когда то на jquery делал:

HTML:
<input type="password" name="reg_name" id="form-password" value=""/>
<span class="password-eye" data-target="#form-password"></span>

JS:
$('.password-eye').click(function(){
    var e = $(this).toggleClass('pass-hidden'),
    traget = e.data('target');
    if(traget && $(traget).length)
        $(traget).prop('type', (e.hasClass('pass-hidden')? 'text':'password'));
});

 

[deedjey]

Код работает везде, кроме модального окна и слоя offcanvas. Есть варианты сделать что-бы код работал и в них? Попробую прикрутить динамическую смену контента, может есть попроще вариант?

 

[Absolute]

Есть простой вариант при наведении курсора на input показывается пароль:

$('[type="password"]').hover(function(){
  this.type = 'text';
}, function(){
  this.type = 'password';
});

 

[yr4ik_07]

Код работает везде, кроме модального окна и слоя offcanvas. Есть варианты сделать что-бы код работал и в них? Попробую прикрутить динамическую смену контента, может есть попроще вариант?

$('.password-eye').click(function(){

заменить на

$('body').on('click', '.password-eye', function(){