it-swarm.com.de

wie kann man den Wert eines Kennwort-Textfelds sichtbar machen, wenn ein Symbol mit der Maus darüber bewegt wird?

Guten Tag alle,

Ich habe ein Formular mit einem Passwortfeld:

<input type="password" name="password" size="30" />

Natürlich wird der Eingabetext durch (*) ersetzt.

Wenn der Benutzer 123 eingegeben hat, zeigt die Box *** an.

Bis hier ist es geradeaus, aber ...

Jetzt möchte ich ein kleines Symbol neben dem Kennwortfeld einfügen. Wenn der Benutzer den Mauszeiger über dieses Symbol bewegt, kann er sehen, was er bisher eingegeben hat.

Während des Schwebefluges zeigt das Feld 123 an und wenn der Benutzer das Symbol verlässt, sollte das Feld *** erneut angezeigt werden.

Gibt es eine Möglichkeit, dies mit JavaScript zu tun? Außerdem verwende ich HTML und PHP.

BEARBEITEN:

Es muss wirklich kein Symbol sein, es könnte eine Checkbox oder eine Schaltfläche sein ... UND wenn es in CSS gemacht werden könnte, würde ich mich sehr darüber freuen, wie

P.S. Ich habe gegoogelt und den stackoverflow durchsucht, aber ohne Glück

26
SULTAN

Sie müssen das Textfeld per Javascript erhalten, wenn Sie den Mauszeiger darüber bewegen, und type in text ändern. Wenn Sie es herausziehen, sollten Sie es wieder in password ändern. Keine Chance, dies in reinem CSS zu tun.

HTML:

<input type="password" name="password" id="myPassword" size="30" />
<img src="theicon" onmouseover="mouseoverPass();" onmouseout="mouseoutPass();" />

JS:

function mouseoverPass(obj) {
  var obj = document.getElementById('myPassword');
  obj.type = "text";
}
function mouseoutPass(obj) {
  var obj = document.getElementById('myPassword');
  obj.type = "password";
}
33
Merlin Denker

Wie diese Jungs gesagt haben, einfach den Eingabetyp ändern.
Aber vergessen Sie nicht, auch den Typ zu ändern.

Sehen Sie sich meine einfache Jquery-Demo an: http://jsfiddle.net/kPJbU/1/

HTML:

<input name="password" class="password" type="password" />
<div class="icon">icon</div>

jQuery:

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

Ich verwende diese eine Zeile Code, es sollte es tun:

<input type="password"
       onmousedown="this.type='text'"
       onmouseup="this.type='password'"
       onmousemove="this.type='password'">
7
user3334188

Vollständiges Beispiel unten. Ich liebe das Kopieren/Einfügen :) 

HTML

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
           <div class="panel panel-default">
              <div class="panel-body">
                  <form class="form-horizontal" method="" action="">

                     <div class="form-group">
                        <label class="col-md-4 control-label">Email</label>
                           <div class="col-md-6">
                               <input type="email" class="form-control" name="email" value="">
                           </div>
                     </div>
                     <div class="form-group">
                       <label class="col-md-4 control-label">Password</label>
                          <div class="col-md-6">
                              <input id="password-field" type="password" class="form-control" name="password" value="secret">
                              <span toggle="#password-field" class="fa fa-lg fa-eye field-icon toggle-password"></span>
                          </div>
                     </div>
                 </form>
              </div>
           </div>
      </div>
  </div>

CSS

.field-icon {
  float: right;
  margin-right: 8px;
  margin-top: -23px;
  position: relative;
  z-index: 2;
  cursor:pointer;
}

.container{
  padding-top:50px;
  margin: auto;
}

JS

$(".toggle-password").click(function() {
   $(this).toggleClass("fa-eye fa-eye-slash");
   var input = $($(this).attr("toggle"));
   if (input.attr("type") == "password") {
     input.attr("type", "text");
   } else {
     input.attr("type", "password");
   }
});

Probieren Sie es hier aus: https://codepen.io/anon/pen/ZoMQZP

5
Adrian P.

1 Minute googeln gab mir dieses Ergebnis . Siehe DEMO!

HTML

<form>
    <label for="username">Username:</label>
    <input id="username" name="username" type="text" placeholder="Username" />
    <label for="password">Password:</label>
    <input id="password" name="password" type="password" placeholder="Password" />
    <input id="submit" name="submit" type="submit" value="Login" />
</form>

jQuery

// ----- Setup: Add dummy text field for password and add toggle link to form; "offPage" class moves element off-screen
$('input[type=password]').each(function () {
    var el = $(this),
        elPH = el.attr("placeholder");
    el.addClass("offPage").after('<input class="passText" placeholder="' + elPH + '" type="text" />');
});
$('form').append('<small><a class="togglePassText" href="#">Toggle Password Visibility</a></small>');

// ----- keep password field and dummy text field in sync
$('input[type=password]').keyup(function () {
    var elText = $(this).val();
    $('.passText').val(elText);
});
$('.passText').keyup(function () {
    var elText = $(this).val();
    $('input[type=password]').val(elText);
});

// ----- Toggle link functionality - turn on/off "offPage" class on fields
$('a.togglePassText').click(function (e) {
    $('input[type=password], .passText').toggleClass("offPage");
    e.preventDefault(); // <-- prevent any default actions
});

CSS

.offPage {
    position: absolute;
    bottom: 100%;
    right: 100%;
}
3
DonJuwe

eine schnelle Reaktion, die nicht bei mehreren Brosern getestet wurde

-> Bei Fokusereignis -> Kennwort ein-/ausblenden

<input type="password" name="password">

skript jQuery

// show on focus
$('input[type="password"]').on('focusin', function(){

    $(this).attr('type', 'text');

});
// hide on focus Out
$('input[type="password"]').on('focusout', function(){

    $(this).attr('type', 'password');

});

Es ist ein einfaches Javascript. Fertig mit Umschalten des type-Attributs der Eingabe. Überprüfen Sie diese http://jsfiddle.net/RZm5y/16/

0
noob
   <script>
       function seetext(x){
           x.type = "text";
       }
       function seeasterisk(x){
          x.type = "password";
       }
   </script>
  <body>
    <img onmouseover="seetext(a)" onmouseout="seeasterisk(a)" border="0" src="smiley.gif"   alt="Smiley" width="32" height="32">
   <input id = "a" type = "password"/>
 </body>

Probier das mal aus, wenn es funktioniert

0
shubhraj

Versuche dies :

In HTML:

<!-- An Input PassWord Field With Eye Font-Awesome Class -->
<input type="password" placeholder="Type Password">
      <i class="show-pass fa fa-eye fa-lg"></i>

In Jquery:

  // Convert Password Field To Text On Hover.
  var passField = $('.password');
  $('.show-pass').hover(function() {
      passField.attr('type', 'text');
  }, function() {
    passField.attr('type', 'password');
  })

In CSS, wenn Sie es gerne stylen möchten.

.show-pass {
  position: absolute;
  top: 17px;
  right: -30px;
}

0
Wael Assaf