Cambiar el campo de contraseña al texto con la casilla de verificación con jQuery

8

es esto lo que busca ??

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

Fuente

2009-12-28 18:45:14

+0

su bienvenida :-) –

0

Utilice el evento onChange cuando marque la casilla de verificación y luego cambie el tipo de entrada a texto/contraseña.

Ejemplo:

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

Fuente

2009-12-28 18:21:56 watain

0

creo que se puede llamar

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

y

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

dependiendo del estado de la casilla de verificación.

Fuente

2009-12-28 18:23:16 KingErroneous

+0

posible en IE, teniendo en cuenta de IE sólo set-que-una vez que descarta para el atributo tipo de elementos de entrada . no es un error de jQuery –

0

Tengo lo siguiente en producción. Clona un nuevo campo que tiene el tipo alternado.

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 no solo le permite tomar el atributo de tipo y cambiarlo, al menos no la última vez que lo intenté.

Fuente

2009-12-28 18:24:39

0

Toggle caso el enfoque de la casilla de verificación y determain el estado de la casilla de verificación y actualizar el campo como 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'); 
     } 
    })

Fuente

2009-12-28 18:26:09 nwhiting

2

actualización: ejemplo vivo here

cambiar el tipo con $('#blahinput').attr('type','othertype') no es posible en el IE, teniendo en cuenta el IE de sólo- regla set-it-once para el atributo type de los elementos de entrada.

necesita eliminar la entrada de texto y agregar la entrada de contraseña, viceversa.

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

ejemplo vivo here

Fuente

2009-12-28 18:33:33

+1

Actualización: No sé por el momento de la pregunta, pero su primer código funciona si prueba .prop ('tipo') hoy en día. – fredlegrain

+0

@fredlegrain No, no en 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>

Fuente

2009-12-28 19:08:03

0

oncheck

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

onuncheck

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

Fuente

2012-03-05 08:37:03 gsoni

0

.attr ('tipo') fue bloqueado por el equipo de jQuery porque no va a trabajar con algunas versiones de IE.

considerar el uso de este código:

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

Fuente

2012-11-05 10:28:20 fredlegrain

0

Esto se puede implementar mucho más 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>

Obras para jQuery 1.6+

Fuente

2014-01-21 17:54:46

1

Usted puede utilizar algo como esta visita

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

    });

aquí para obtener más http://voidtricks.com/password-show-hide-checkbox-click/

no

Fuente

2014-04-01 02:38:45

Cambiar el campo de contraseña al texto con la casilla de verificación con jQuery

Respuesta

Cuestiones relacionadas