使用jQuery复选框将密码字段更改为文本

8

这是你在寻找什么？

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

来源

2009-12-28 18:45:14

+0

欢迎您:-) – 2009-12-28 19:50:45

0

勾选复选框时使用onChange事件，然后将输入的类型切换为文本/密码。

例子：

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

来源

2009-12-28 18:21:56 watain

0

我相信你可以打电话

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

和

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

取决于复选框状态。

来源

2009-12-28 18:23:16 KingErroneous

+0

无法在IE中，考虑到IE唯一的，设置它曾经统治输入元素的类型属性。不是一个jQuery的bug – 2009-12-28 18:44:36

0

我在生产中有以下几项。它克隆了一个具有切换类型的新字段。

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不只是让你取得type属性并改变它，至少不是我最后一次尝试。

来源

2009-12-28 18:24:39

0

切换复选框的焦点事件和determain复选框的状态并更新字段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'); 
     } 
    })

来源

2009-12-28 18:26:09 nwhiting

2

更新：活生生的例子here

可更换式与$('#blahinput').attr('type','othertype')是不可能在IE中，考虑到IE的only-为输入元素的type属性设置一次规则。

您需要删除文本输入并添加密码输入，反之亦然。

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

活生生的例子here

来源

2009-12-28 18:33:33

+1

更新：我不知道这个问题的时间，但如果你现在尝试使用.prop（'type'），你的第一个代码就可以工作。 – fredlegrain 2012-11-05 10:23:20

+0

@fredlegrain不要在IE8 – 2015-01-09 15:07:13

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>

来源

2009-12-28 19:08:03

0

的oncheck

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

onuncheck

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

来源

2012-03-05 08:37:03 gsoni

0

.attr（ '类型'）被阻断jQuery开发团队，因为它不会与IE浏览器的一些版本。

考虑使用此代码：

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

来源

2012-11-05 10:28:20 fredlegrain

0

这可以更简单的实现：

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

作品的jQuery 1。6+

来源

2014-01-21 17:54:46

1

你可以使用一些这样的事

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

    });

访问此处，了解http://voidtricks.com/password-show-hide-checkbox-click/

来源

2014-04-01 02:38:45

使用jQuery复选框将密码字段更改为文本

回答

相关问题