Ich habe ein Passwortfeld und möchte das Passwort anzeigen, wenn jemand auf das Augensymbol klickt und wenn Sie die Maustaste verlassen, möchte ich das Passwort erneut maskieren. Wie geht das?

Ich habe den folgenden Code gefunden, aber in diesem Fall befindet sich das Ereignis beim Schweben, das ich beim Klicken und Halten benötige.

$('.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>
-1
J M 8 Feb. 2020 im 13:26

5 Antworten

Beste Antwort
$('.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>
2
db1975 8 Feb. 2020 im 10:34

Versuchen Sie dies mit (ajax.googleapis.com/ajax/libs/jquery)

$('.icon').hover(function () {
   $('.password').attr('type', 'text'); 
}, function () {
   $('.password').attr('type', 'password'); 
});
0
Aitezaz Bilal 8 Feb. 2020 im 10:39

Geprüft!

 $('.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>
0
Farzad Rastgar Sani 8 Feb. 2020 im 10:40

Mit diesem Code können Sie die Augenschaltfläche zum Anzeigen und Ausblenden des Kennworts sowie die Änderung der Augenschaltfläche nach dem Ändern des Status hinzufügen (Kennwort anzeigen / Kennwort ausblenden).

$('.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>

Ich habe das ID-Attribut für die Passworteingabe und die Augenschaltfläche verwendet.

0
Mostafa Mirmousavi 8 Feb. 2020 im 10:47
$('.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>
0
db1975 8 Feb. 2020 im 10:30