使用 jQuery 将密码字段更改为带有复选框的文本答案

【问题标题】：Changing password field to text with checkbox with jQuery使用 jQuery 将密码字段更改为带有复选框的文本
【发布时间】：2010-12-30 13:24:12
【问题描述】：

如何将密码字段切换为文本和密码，并取消选中复选框？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你可以使用这样的东西

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

    });

【讨论】：

【解决方案2】：

这可以更简单地实现：

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

【讨论】：

【解决方案3】：

检查

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

取消选中

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

【讨论】：

【解决方案4】：

.attr('type') 被 jQuery 团队阻止，因为它不适用于某些版本的 IE。

考虑使用此代码：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

这就是你要找的吗？？

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

【讨论】：

【解决方案7】：

更新：实时示例here

在 IE 中无法使用 $('#blahinput').attr('type','othertype') 更改类型，考虑到 IE 对输入元素的类型属性的唯一设置一次规则。

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

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

【讨论】：

更新：我不知道问题的时间，但如果你现在尝试 .prop('type')，你的第一个代码就可以工作。
@fredlegrain Nope not on IE8

【解决方案8】：

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

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 不只是让您获取类型属性并更改它，至少我上次尝试时没有。

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

相信你可以打电话

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

和

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

取决于复选框状态。

【讨论】：

不可能在 IE 中，考虑到 IE 对输入元素的类型属性的唯一设置一次规则。不是 jQuery 错误

【解决方案11】：

勾选复选框时使用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>

【讨论】：