it-swarm.com.de

Wenn ein Benutzer auf Link anzeigen klickt, zeigen Sie das Kennwort an und blenden Sie es aus, wenn Sie erneut darauf klicken

Ich versuche, dieses einfache Skript zum Laufen zu bringen. Wenn ein Benutzer auf den Link Anzeigen klickt, wird das Kennwort grundsätzlich im Textfeld Kennwort angezeigt und beim erneuten Klicken ausgeblendet. Ich habe nach Lösungen gesucht, konnte aber nichts finden, was ich brauche. Hier ist der Code:

JavaScript

    function toggle_password(target){
    var tag = getElementById(target);
    var tag2 = getElementById("showhide");
    if (tag2.innerHTML == 'Show'){
        tag.setAttribute('type', 'text');   
        tag2.innerHTML = 'Hide';
    }
    else{
        tag.setAttribute('type', 'password');   
        tag2.innerHTML = 'Show';
    }

    }

HTML

<label for="pwd0">Password:</label>
<input type="password" value="####" name="password" id="pwd0" />
<a href="#" onclick="toggle_password('pwd0');" id="showhide">Show</a>

Wenn ich auf den Link klicke, passiert nichts. Ich habe dies auch ohne if-Anweisung getestet und nichts unternommen.

16
Daniel Harris

sie haben document nicht für getElementById verwendet.

function toggle_password(target){
    var d = document;
    var tag = d.getElementById(target);
    var tag2 = d.getElementById("showhide");

    if (tag2.innerHTML == 'Show'){
        tag.setAttribute('type', 'text');   
        tag2.innerHTML = 'Hide';

    } else {
        tag.setAttribute('type', 'password');   
        tag2.innerHTML = 'Show';
    }
}

ihre id-Namen sind illegal und es ist schwierig, mit ihnen zu arbeiten: pwd'.$x.' Sie können einige dieser Zeichen nicht haben.

Die HTML 4.01-Spezifikation besagt, dass ID-Token mit einem Buchstaben ([A-Za-z]) beginnen müssen und von beliebig vielen Buchstaben, Ziffern ([0-9]), Bindestrichen (-) und Unterstrichen (_) gefolgt werden können. , Doppelpunkte (:) und Punkte (.).

außerdem funktioniert diese Methode nicht in allen Browsern. In IE <9 können Sie beispielsweise nur .type ändern, bevor das Element an das Dokument angehängt wird

versuche sie zu tauschen:

function swapInput(tag, type) {
  var el = document.createElement('input');
  el.id = tag.id;
  el.type = type;
  el.name = tag.name;
  el.value = tag.value; 
  tag.parentNode.insertBefore(el, tag);
  tag.parentNode.removeChild(tag);
}

function toggle_password(target){
    var d = document;
    var tag = d.getElementById(target);
    var tag2 = d.getElementById("showhide");

    if (tag2.innerHTML == 'Show'){

        swapInput(tag, 'text');
        tag2.innerHTML = 'Hide';

    } else {
        swapInput(tag, 'password');   
        tag2.innerHTML = 'Show';
    }
}

hoffe das hilft -ck

14
ckozl

Hier ist ein Beispiel mit jQuery ( Pastebin ):

$(document).ready(function() {
  $("#showHide").click(function() {
    if ($(".password").attr("type") == "password") {
      $(".password").attr("type", "text");

    } else {
      $(".password").attr("type", "password");
    }
  });
});
#showHide {
  width: 15px;
  height: 15px;
  float: left;
}
#showHideLabel {
  float: left;
  padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Password:</td>
    <td>
      <input type="password" name="password" class="password" size="25">
    </td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type="checkbox" id="showHide" />
      <label for="showHide" id="showHideLabel">Show Password</label>
    </td>
  </tr>
</table>

Quellen:

http://www.voidtricks.com/password-show-hide-checkbox-click/

Wie werden Checkboxen und ihre Beschriftungen konsistent über Browser hinweg ausgerichtet

5
silver

Aus Sicherheitsgründen können Sie den Typ eines Eingabeelements nicht ändern. Sie müssen das gesamte Element durch ein neues ersetzen. 

2
Daff

Es ist wirklich leicht zu erreichen ... Ich habe diesen blog post gefunden, der die Vorgehensweise mit ein paar Zeilen Code beschreibt. Ich denke, es ist keine gute Praxis, eine Option wie diese beizubehalten, da Kennwörter ernst genommen werden müssen. 

hier ist der Code von dieser Seite; es verwendet den gleichen Ansatz wie Sie beschrieben haben. verwendet aber ein Kontrollkästchen. Und praktisch habe ich gesehen, worauf er in oss 'wie Linux hinweist. Sie hinterlassen nicht einmal eine Spur des Passworts mit einem Sternchen (aber die Gui-Sache tut es nicht, weiß nicht, ob sie sich wirklich um die Privatsphäre von pw kümmern, oder sie finden es schwierig, dies in der Kommandozeile zu tun ;-))

var textbox_elem = document.getElementById("password");
    if(check_box.checked)
    textbox_elem.setAttribute("type", "text");
    else
    textbox_elem.setAttribute("type", "password");
1
Nimeshka Srimal

http://www.voidtricks.com/password-show-hide-checkbox-click/ .__ Dies ist ein einfaches Lernprogramm, um ein Kennwort in einem Eingabefeld anzuzeigen, wenn ein Kontrollkästchen aktiviert ist, und es bei der Das Kontrollkästchen ist mit jQuery nicht markiert.

Javascript

<script type="text/javascript">
 $(document).ready(function () {
 $("#showHide").click(function () {
 if ($(".password").attr("type")=="password") {
 $(".password").attr("type", "text");
 }
 else{
 $(".password").attr("type", "password");
 }

 });
 });
</script>

<!-- language: lang-html -->

HTML *

<input type="password" class="password"><br>
    <input type="checkbox" id="showHide"> Show?

* Wir haben ein Passwort-Eingabefeld mit der Klasse "Passwort" und ein Kontrollkästchen mit der ID "showHide".

Einfache Lösung zum Anzeigen/Ausblenden des Kennworts mithilfe von Kontrollkästchen. Dies ist die Noob-Ebene, die nur zum Kopieren und Einfügen verwendet wird. ERLEDIGT !!! ;-)

1
spacedev

Ich glaube, so wolltest du:

function toggle_password(){
  var d = document;
  var tag = d.getElementById("pwd");
  var tag2 = d.getElementById("showhide");
  if (tag2.innerHTML == 'Show'){
    tag.setAttribute('type', 'text');
    tag2.innerHTML = 'Hide';
  } else {
    tag.setAttribute('type', 'password');
    tag2.innerHTML = 'Show';
  }
}
#input_field{
  margin:25px;
  padding:25px;
  border:5px solid black;
}
<html>
<head>
</head>
<body>
 <div id="input_field">
  <label for="pwd">Password:</label>
  <input type="password" value="" name="password" id="pwd" />
  <a href="#" onclick="toggle_password();"                         
  id="showhide">Show</a>
 <div>
</body>
</html>
0
keval

Sie können ein Inline-Skript für eine einfache Implementierung von show/hide password verwenden.

   

 <form>
    <input 
    onmouseover="this.setAttribute('type','text')"               
    onmouseout="this.setAttribute('type','password')" 
    placeholder="Hover to show password!" 
    type="password" 
    name="password-login"
    id="password-login"
    >
    </form>   

0
laxman vijay

ihre Lösung kann sein

function toggle_pass(){
    var pass = document.getElementById('showhide').innerHTML;
        if(pass=="show")
         {
            document.getElementById('pwd0').type = "text";
            pass= "Hide";
         }
        else
         {
            document.getElementById('pwd0').type = "password";
            pass = "Show Password";
         }
}
0

Obwohl die Frage immer noch die Antwort hat, poste ich sie immer noch.

    function toggle_password () {
    var tag = document.getElementById("pwd0");
    var tag2 = document.getElementById("showhide");
    if (tag2.innerHTML == 'Show'){
        tag.type="text";   
        tag2.innerText = 'Hide';
    }
    else {
        tag.type="password";   
        tag2.innerText = 'Show';
    }

    }
<label for="pwd0">Password:</label>
<input type="password" value="####" name="password" id="pwd0" />
<a href="#" onclick="toggle_password();" id="showhide">Show</a>

0
user8158111

Wenn wir einen Textfeldtyp als "passowrd" erstellen, werden die Zeichen nicht angezeigt. Wenn Sie jedoch einen Textfeldtyp erstellen, werden "text"-Zeichen während der Eingabe angezeigt.

Daher ist die Logik sehr einfach. Wir können den Typ eines beliebigen HTML-Elements durch die Funktion "setAttribute(type,newvalue)" von JavaScript ändern. 

Ein vollständiges Code-Beispiel finden Sie unter dem folgenden Link:

http://www.tutor4web.com/javascript/how-to-show-password-as-text-with-checkbox-using-javascript/

0
tutor4web.com