web-dev-qa-db-fra.com

Lorsqu'un utilisateur clique sur Afficher le lien, affiche le mot de passe et le cache lorsqu'il est à nouveau cliqué.

J'essaie de faire fonctionner ce script simple. Fondamentalement, lorsqu'un utilisateur clique sur le lien Afficher, il affiche le mot de passe dans la zone de texte du mot de passe et le cache lorsqu'il est à nouveau cliqué. J'ai cherché des solutions mais je n'ai rien trouvé pour ce dont j'ai besoin. Voici le 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>

Quand je clique sur le lien, rien ne se passe. J'ai testé cela sans utiliser l'instruction if aussi et je n'ai toujours rien fait.

javascripthtmltextboxpasswordsshow-hide
16
Daniel Harris

vous n'utilisiez pas document sur pour getElementById

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';
    }
}

vos noms id sont illégaux et difficiles à utiliser: pwd'.$x.' vous ne pouvez pas avoir certains de ces caractères.

La spécification HTML 4.01 indique que les jetons d’ID doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis d’un nombre quelconque de lettres, de chiffres ([0 à 9]), de trait d’union (-) et de trait de soulignement (_). , les deux points (:) et les points (.).

de plus, cette méthode ne fonctionnera pas dans tous les navigateurs, par exemple dans IE <9, vous ne pouvez modifier que .type avant que l'élément ne soit attaché au document.

essayez de les échanger:

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';
    }
}

espérons que cela aide -ck

14
ckozl

Voici un exemple utilisant 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>

Sources:

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

Comment aligner les cases à cocher et leurs libellés sur plusieurs navigateurs

5
silver

Pour des raisons de sécurité, vous ne pouvez pas modifier le type d'un élément d'entrée. Vous devez remplacer l'élément entier par un nouveau. 

2
Daff

C'est vraiment facile à réaliser ... J'ai trouvé ce blog post qui décrit la façon de le faire avec quelques lignes de code. Je pense que ce n'est pas une bonne pratique de garder une option comme celle-ci car les mots de passe doivent être traités avec sérieux. 

voici le code de cette page; il utilise la même approche que vous avez décrite. mais utilise une case à cocher. et pratiquement, j'ai vu ce qu'il indique dans Oss 'comme Linux. ils ne laissent même pas une trace du mot de passe avec un astérisque (mais la chose en gui fait, je ne sais pas qu'ils se soucient vraiment de la confidentialité de pw ou ils ont du mal à le faire en ligne de commande ;-))

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/ Il s'agit d'un didacticiel simple permettant d'afficher un mot de passe dans une zone de saisie lorsqu'une case à cocher est cochée et de la masquer lorsque La case à cocher est décochée avec jQuery.

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?

* Nous avons un champ de saisie de mot de passe avec la classe "mot de passe" et une case à cocher avec l'id "showHide"

Solution facile pour afficher/masquer le mot de passe à l'aide de cases à cocher, et il s'agit simplement d'un niveau copier/coller. TERMINÉ !!! ;-)

1
spacedev

Vous pouvez utiliser le script en ligne pour une implémentation simple du mot de passe d'affichage/masquage.

   

 <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

votre solution peut être

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
Pravarna Bidisha

Bien que la question ait toujours la réponse, je poste toujours cette réponse.

    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

Si nous créons un type de zone de texte sous la forme "passowrd", les caractères ne sont pas affichés, mais lorsque nous créons un type de zone de texte, les caractères "text" sont affichés lors de la frappe.

La logique est donc très simple. Nous pouvons changer le type de n'importe quel élément HTML avec la fonction "setAttribute(type,newvalue)" de JavaScript. 

Un exemple de code complet peut être vu sur le lien ci-dessous:

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

0
tutor4web.com