关于密码明文密文的转换

下面这段代码是自己想的，但用两个文本的方式感觉不太好，而且还得用样式去控制他们的大小和位置，点击复选框时，还会出现页面刷新的效果，求大神们给个方法，只用一个文本就可以实现明文和密文的转换
   <script>
    function $1(id){return document.getElementById(id)}
    function l()
    {
     if( $1("cb1").checked)
     {
     $1("tb2").style.display="block";
     $1("tb1").style.display="none";
     $1("tb2").value=$1("tb1").value;
    }
     else
     {
     $1("tb1").style.display="block";
     $1("tb2").style.display="none";
     $1("tb2").value="";}
    }
    
    </script></head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="tb1" runat="server" TextMode="Password"></asp:TextBox>
        <asp:TextBox ID="tb2" runat="server" style="display:none;"></asp:TextBox>
        <input id="cb1" type="checkbox" onclick="l()" />
    </div>
    </form>
</body>

解决方案 »

  1.   


    用户：<input type=text value="ayeah"><BR>
    密码：<span id="pass"><input type=password id=pw name="pw" value="www.ayeah.com"></span><INPUT TYPE="checkbox" id="showPass" onclick="var temp=document.getElementById('pw').value;if(this.checked){document.getElementById('pass').innerHTML='<input type=text id=pw name=pw>';}else{document.getElementById('pass').innerHTML='<input type=password id=pw name=pw>';} document.getElementById('pw').value=temp;">显示密码
      

  2.   


        <script type="text/javascript">
            function l() {
                var temp = $("#tb1").attr("value");
                if ($("#cb1")[0].checked) {
                    $("#sp1")[0].innerHTML = '<input type=text id=tb1 name=tb1>';
                }
                else {
                    $("#sp1")[0].innerHTML = '<input type=password id=tb1 name=tb1>';
                }
                $("#tb1")[0].value = temp;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <span id="sp1">
                    <asp:TextBox ID="tb1" runat="server" TextMode="Password"></asp:TextBox>
                </span>
                <input id="cb1" type="checkbox" onclick="l()" />
            </div>
        </form>
    </body>
      

  3.   


        <script type="text/javascript">
            function l() {
                var temp = $("#tb1").attr("value");
                //$("#cb1").is(':checked')
                if ($("#cb1").attr("checked")) {
                    $("#sp1").html('<input type=text id=tb1 name=tb1>');
                }
                else {
                    $("#sp1").html('<input type=password id=tb1 name=tb1>');
                }
                $("#tb1").attr("value", temp);
            }
        </script>这样写全用jquery，刚才用attr value的时候value写错了个字母取不到值，所以才用了dom对象。