Passwortfeld in Text mit Kontrollkästchen mit jQuery ändern

8

ist es das, was Sie suchen ??

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

Quelle

2009-12-28 18:45:14

+0

Ihre Begrüßung :-) –

0

Verwenden Sie das onChange Ereignis, wenn Sie das Kontrollkästchen ankreuzen und dann den Eingangstyp auf Text/Passwort umschalten.

Beispiel:

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

Quelle

2009-12-28 18:21:56 watain

0

Ich glaube, Sie

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

anrufen und

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

auf die Checkbox Zustand abhängig.

Quelle

2009-12-28 18:23:16 KingErroneous

+0

nicht möglich in IE, wenn man bedenkt IE nur-Set-it-einmal für das type-Attribut von Eingabeelementen herrschen . kein jQuery Bug –

0

Ich habe folgendes in der Produktion. Es klont ein neues Feld mit dem getoggten Typ.

toggle_clear_password = function(fields) { 

    // handles a list of fields, or just one of course 
    fields.each(function(){ 
    var orig_field = $(this); 
    var new_field = $(document.createElement('input')).attr({ 
     name: orig_field.attr('name'), 
     id: orig_field.attr('id'), 
     value: orig_field.val(), 
     type: (orig_field.attr('type') == 'text'? 'password' : 'text') 
    }) 
    new_field.copyEvents(orig_field); // jquery 'copyEvents' plugin 
    orig_field.removeAttr('name'); // name clashes on a form cause funky submit-behaviour 
    orig_field.before(new_field); 
    orig_field.remove(); 
    }); 
}

JQuery lässt Sie nicht nur das Typattribut nehmen und es ändern, zumindest nicht das letzte Mal, als ich es versuchte.

Quelle

2009-12-28 18:24:39

0

Toggle der Fokus Veranstaltung Checkbox und determain den Status der Checkbox und aktualisieren das Feld als 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'); 
     } 
    })

Quelle

2009-12-28 18:26:09 nwhiting

2

aktualisiert: anschauliches Beispiel here

Typ mit $('#blahinput').attr('type','othertype') Wechsel ist nicht möglich, in IE, wenn man bedenkt IE nur- Einmalige Regel für das type-Attribut von Eingabeelementen.

Sie müssen Texteingabe entfernen und Passworteingabe hinzufügen, umgekehrt.

$(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); 
    } 
    }); 
})

anschauliches Beispiel here

Quelle

2009-12-28 18:33:33

+1

Update: Ich weiß nicht für die Zeit der Frage, aber Ihr erster Code funktioniert, wenn Sie versuchen, .prop ("Typ") heutzutage. – fredlegrain

+0

@fredlegrain Nein, nicht auf 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>

Quelle

2009-12-28 19:08:03

0

oncheck

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

onuncheck

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

Quelle

2012-03-05 08:37:03 gsoni

0

.attr ('Typ') wurde von jQuery Team blockiert, weil es nicht mit einigen Versionen von IE funktionieren wird.

Betrachten Sie diesen Code verwenden:

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

Quelle

2012-11-05 10:28:20 fredlegrain

0

So viel einfacher umgesetzt werden können:

<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 für jQuery 1.6+

Quelle

2014-01-21 17:54:46

1

können Sie etwas verwenden, wie dieses

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

    });

Besuch hier für weitere http://voidtricks.com/password-show-hide-checkbox-click/

Quelle

2014-04-01 02:38:45

Passwortfeld in Text mit Kontrollkästchen mit jQuery ändern

Antwort

Verwandte Themen