通過jquery做密碼框的顯示和隱藏效果
阿新 • • 發佈:2018-01-31
pen glyphicon 屬性 tex -c 分享 watermark 打開 樣式 原理
通過jquery修改input的type屬性,為password時是隱藏,text則是顯示。另外把眼睛的樣式打開。
很多時候看著很強大的功能其實很簡單
html
<div class="login-form"> <form class="form"> <div> <i class="show_pass glyphicon glyphicon-eye-open"></i> <input type="password" class="password" placeholder="Password" value="2"> <input type="submit" class="submit btn btn-success btn-xs" value="登陸"> </div> </form> </div>
jquery
<script> $(‘.show_pass‘).click(function () { let pass_type = $(‘input.password‘).attr(‘type‘); if (pass_type === ‘password‘ ){ $(‘input.password‘).attr(‘type‘, ‘text‘); $(‘.show_pass‘).removeClass(‘glyphicon-eye-open‘).addClass(‘glyphicon-eye-close‘); } else { $(‘input.password‘).attr(‘type‘, ‘password‘); $(‘.show_pass‘).removeClass(‘glyphicon-eye-close‘).addClass(‘glyphicon-eye-open‘); } }) </script>
test
初始效果
輸入密碼
查看密碼
通過jquery做密碼框的顯示和隱藏效果