Как показать пароль только по нажатию и удержанию глаза?

Question

У меня есть поле для ввода пароля, и я хочу показать пароль , когда кто-то нажимает на значок глаза , а когда вы нажимаете кнопку мыши, я хочу снова замаскировать пароль. Как это сделать?

Я нашел приведенный ниже код, но в этом случае при наведении курсора мне нужно нажать и удерживать.

$('.icon').hover(function () {
   $('.password').attr('type', 'text'); 
}, function () {
   $('.password').attr('type', 'password'); 
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="password" class="password" type="password" />
<div class="fa fa-eye icon"></div>

Answer 1

$('.icon').mousedown(function () {
   $('.password').attr('type', 'text'); 
});
$('.icon').mouseup(function () {
   $('.password').attr('type', 'password'); 
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="password" class="password" type="password" />
<div class="fa fa-eye icon"></div>

Answer 2

С помощью этого кода вы можете добавить кнопку «глаз» для отображения и скрытия пароля, а также кнопку «глаз» изменить после изменения статуса (показать пароль / скрыть пароль).

$('.icon').click(function () {
   if ($('#my-password').attr('type') == 'text') {
      $('#my-password').attr('type', 'password');
      $('#show-password').removeClass('fa-eye-slash').addClass('fa-eye');
   } else {
      $('#my-password').attr('type', 'text');
      $('#show-password').removeClass('fa-eye').addClass('fa-eye-slash');
   }
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="password" id="my-password" type="password" />
<div class="fa fa-eye icon" id="show-password"></div>

Я использовал атрибут ID для выбора ввода пароля и кнопки «глаз».

Answer 3

Попробуйте это с (ajax .googleapis.com / ajax / libs / jquery)

$('.icon').hover(function () {
   $('.password').attr('type', 'text'); 
}, function () {
   $('.password').attr('type', 'password'); 
});

Answer 4

Проверено!

 $('.icon').click(function () {
    $('.password').attr('type', 'text');
    setTimeout(function(){ 
        $('.password').attr('type', 'password');
    }, 200); 
}); 

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="password" class="password" type="password" />
<div class="fa fa-eye icon"></div>

Answer 5

$('.icon').click(function () {
   if ($('.password').attr('type') == 'text') {
      $('.password').attr('type', 'password');
   } else {
      $('.password').attr('type', 'text');
   }
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="password" class="password" type="password" />
<div class="fa fa-eye icon"></div>