js实现显示密码和隐藏密码

来源:互联网 发布:如何利用网络推广 编辑:程序博客网 时间:2024/05/21 16:59
html代码: <ul class="clear set-ul ">    <li class="fl red-color">*</li>    <li class="pass-li fl" id="pa_password">    <input type="password"  onkeyup="value=value.replace(/[^\d\w]/g,'')" id="setpass" class="pass-text" name="pass"/>        <span class="span-pass">交易密码</span>        </li>    <li class="fl">      <input type="checkbox" class="show-pass"/>      <span class="show-span" data-pass='off'>显示密码</span>    </li></ul><ul class="clear set-ul">    <li class="fl red-color">*</li>    <li class="pass-li fl" id="pa_password2">    <input type="password"  onkeyup="value=value.replace(/[^\d\w]/g,'')" id="setpass2" class="pass-text" name="pass"/>    <span class="span-pass">交易密码</span>    </li>    <li class="fl">      <input type="checkbox" class="show-pass2"/>       <span class="show-span" data-pass='off'>显示密码</span>    </li></ul>![html静态页面](http://img.blog.csdn.net/20160909161700495)js代码: /*显示隐藏密码*/      $('.show-pass').change(function(){              showPass(0);      });      $('.show-pass2').change(function(){              showPass(1);      });     function showPass(num){        var ele_pass = $(".pass-text").eq(num);        var ele_eye = $('.show-span').eq(num);        var state = ele_eye.data("pass");        if(state == 'off'){            ele_pass.attr("type","text");            ele_eye.data("pass","on");            ele_eye.html("隐藏密码");        }else{            ele_pass.attr("type","password");            ele_eye.data("pass","off");            ele_eye.html("显示密码");        }     };      /*显示隐藏密码 end*/     ![运行后的效果](http://img.blog.csdn.net/20160909162136250)
0 0