0

OK私がやろうとしているのは、1つのチェックボックスで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>

私はいくつかのことを試しましたが、どこにも行きません。

4

2 に答える 2

1

私は同じ問題を抱えていて、それを処理してgithubに投稿する簡単なjQueryプラグインを作成しました。

あなたの場合、使用法は次のようになります。

<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>
于 2013-03-01T21:43:05.097 に答える
0

インターネットでそれを入手できないのは驚くべきことです。しかし、はい、これがJquery1.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を持つタイプpassword/textのすべての要素を処理できます。

于 2013-02-11T17:29:30.730 に答える