Modification du champ de mot de passe en texte avec la case à cocher avec jQuery

8

est ce ce que vous recherchez ??

<html> 
<head> 
<script> 
    function changeType() 
    { 
     document.myform.txt.type=(document.myform.option.value=(document.myform.option.value==1)?'-1':'1')=='1'?'text':'password'; 
    } 
</script> 
</head> 

<body> 
    <form name="myform"> 
     <input type="text" name="txt" /> 
     <input type="checkbox" name="option" value='1' onchange="changeType()" /> 
    </form> 
</body> 
</html>

Source

2009-12-28 18:45:14

+0

votre accueil :-) –

0

Utilisez l'événement onChange lorsque vous cochez la case, puis basculez le type de l'entrée sur texte/mot de passe.

Exemple:

<input type="checkbox" onchange="tick(this)" /> 
<input type="input" type="text" id="input" /> 
<script> 
function tick(el) { 
$('#input').attr('type',el.checked ? 'text' : 'password'); 
} 
</script>

Source

2009-12-28 18:21:56 watain

0

Je crois que vous pouvez appeler

$('#inputField').attr('type','text');

et

$('#inputField').attr('type','password');

en fonction de l'état de case à cocher.

Source

2009-12-28 18:23:16 KingErroneous

+0

pas possible dans IE, compte tenu de IE de ne-set-it-une fois la règle de l'attribut de type d'éléments d'entrée . pas un bug jQuery –

0

Je suis en production. Il clone un nouveau champ ayant le type basculé. JQuery ne vous permet pas seulement de prendre l'attribut type et de le changer, du moins pas la dernière fois que j'ai essayé.

Source

2009-12-28 18:24:39

0

Bascule l'événement de mise au point de la case à cocher et determain l'état de la case à cocher et mettre à jour le champ comme nesscarry

$box = $('input[name=checkboxName]'); 

    $box.focus(function(){ 
     if ($(this).is(':checked')) { 
      $('input[name=PasswordInput]').attr('type', 'password');  
     } else { 
      $('input[name=PasswordInput]').attr('type', 'text'); 
     } 
    })

Source

2009-12-28 18:26:09 nwhiting

2

mis à jour: exemple en direct here

changement de type avec $('#blahinput').attr('type','othertype') est impossible dans IE, compte tenu de IE de seulement- règle set-it-once pour l'attribut type des éléments d'entrée.

Vous devez supprimer l'entrée de texte et ajouter une entrée de mot de passe, et inversement.

$(function(){ 
    $("#show").click(function(){ 
    if($("#show:checked").length > 0){ 
     var pswd = $("#txtpassword").val(); 
     $("#txtpassword").attr("id","txtpassword2"); 
     $("#txtpassword2").after($("<input id='txtpassword' type='text'>")); 
     $("#txtpassword2").remove(); 
     $("#txtpassword").val(pswd); 
    } 
    else{ // vice versa 
     var pswd = $("#txtpassword").val(); 
     $("#txtpassword").attr("id","txtpassword2"); 
     $("#txtpassword2").after($("<input id='txtpassword' type='password'>")); 
     $("#txtpassword2").remove(); 
     $("#txtpassword").val(pswd); 
    } 
    }); 
})

exemple en direct here

Source

2009-12-28 18:33:33

+1

Mise à jour: Je ne sais pas pour l'heure de la question, mais votre premier code fonctionne si vous essayez .prop ('type') de nos jours. – fredlegrain

+0

@fredlegrain Nope pas sur IE8 –

0

<html> 
<head> 
<script> 
    $(function(){ 
     $("#changePass").click(function(){ 
      if ($("#txttext").hasClass("hide")){ 
       $("#txttext").val($("#txtpass").val()).removeClass("hide"); 
       $("#txtpass").addClass("hide"); 
      } else if ($("#txtpass").hasClass("hide")){ 
       $("#txtpass").val($("#txttext").val()).removeClass("hide"); 
       $("#txttext").addClass("hide"); 
      } 
     }); 
    }); 
</script> 
<style> 
    .hide{display:none;} 
</style> 
</head> 
<body> 
    <form id="myform"> 
     <input type="text" id="txtpass" type='password'/> 
     <input class="hide" type="text" id="txttext" type='text'/> 
     <button id="changePass">change</button> 
    </form> 
</body> 
</html>

Source

2009-12-28 19:08:03

0

oncheck

$('#password').get(0).type = 'text';

onuncheck

$('#password').get(0).type = 'password';

Source

2012-03-05 08:37:03 gsoni

0

.attr ('type') a été bloqué par l'équipe jQuery parce qu'il ne fonctionne pas avec certaines versions de IE.

en utilisant ce code Tenir compte:

$('#inputField').prop('type','text'); 
$('#inputField').prop('type','password');

Source

2012-11-05 10:28:20 fredlegrain

0

Cela peut être mis en œuvre beaucoup plus simple:

<form name="myform"> 
    <input type="password" name="password" /> 
    <input type="checkbox" name="showPassword" onchange="togglePasswordVisibility()" /> 
</form> 

<script> 
    function togglePasswordVisibility() { 
     $('#password').attr('type', $('#showPassword').prop('checked') ? 'text' : 'password'); 
    } 
</script>

Works pour jQuery 1.6+

Source

2014-01-21 17:54:46

1

Vous pouvez utiliser quelque chose comme ça

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

    });

visite ici pour plus d'http://voidtricks.com/password-show-hide-checkbox-click/

Source

2014-04-01 02:38:45

Modification du champ de mot de passe en texte avec la case à cocher avec jQuery

Répondre

Questions connexes