Question

Ok我想要做的是切换3个密码输入框和一个复选框...点击复选框我想在输入框中显示所有3个密码。无论如何要适应这个吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!--
  Created using jsbin.com
  Source can be edited via http://jsbin.com/opafo3/1/edit
-->
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
</style>

<style id="jsbin-css">

</style>
</head>
<body>
  <p><input id="show" type="checkbox" /><label for="show">show password</label></p>
  <p><input id="txtpassword" type="password" /></p>
<script>
$(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{
      var pswd = $("#txtpassword").val();
      $("#txtpassword").attr("id","txtpassword2");
      $("#txtpassword2").after( $("<input id='txtpassword' type='password'>") );
      $("#txtpassword2").remove();
      $("#txtpassword").val( pswd );
    }
  });
})
</script>



</body>
</html>

我尝试过几件事，但我无处可去。

Answer 1

我遇到了同样的问题并编写了一个简单的jQuery插件来处理它并将其发布到github。

在您的情况下，用法类似于：

<input type="password" id="inputGroup1">
<input type="password" id="inputGroup2">
<label>
  <input type="checkbox" class="input-mask" data-toggle='["inputGroup1", "inputGroup2"]'>Toggle Password
</label>
<script>
$('.input-mask').passwordToggle();
</script>

Answer 2

令人惊讶的是，您无法通过互联网获取此信息。但是，是的，这里是使用Jquery 1.9.1

的代码

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#show").bind("click",function(){
                    $(".txtPassword").each(function(e){
                        if($($(".txtPassword")[e]).attr("type")=="password"){
                            $($(".txtPassword")[e]).attr("type","text");
                        }
                        else if($($(".txtPassword")[e]).attr("type")=="text"){
                            $($(".txtPassword")[e]).attr("type","password");
                        }
                    })
                })

            });
        </script>
    </head>
    <body>
        <p><input id="show" type="checkbox" /><label for="show">show password</label></p>
        <p><input class="txtpassword" type="password" /></p>
        <p><input class="txtpassword" type="password" /></p>
        <p><input class="txtpassword" type="password" /></p>
    </body>
</html>

将密码的ID更改为类。此代码可以处理具有类txtpassword

的密码/文本类型的所有元素

使用单个复选框切换多个密码输入

2 个答案: