通过jquery做密码框的显示和隐藏效果
2018-01-31 10:35
239 查看
原理
通过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做密码框的显示和隐藏效果
- jQuery通过改变input的type属性实现密码显示隐藏切换功能
- jquery通过visible来判断标签是否显示或隐藏
- 有了html页面,进行二次显示,通过html、JavaScript、jQuery的ajax三种技术,我可以实现任何界面效果
- jQuery效果-隐藏、显示、切换、滑动、淡入淡出以及动画。
- 显示/隐藏输入的密码--jquery插件--toggle-password
- jquery 实现密码框的显示与隐藏示例代码
- jquery 隐藏 显示 动画效果
- JQuery实现密码有短暂的显示过程和实现 input hint效果
- jQuery之动画效果(动画基础隐藏和显示,上卷下拉效果 ,淡入淡出效果 ,动画切换的比较,自定义动画,jQuery核心)
- jQuery显示隐藏多效果特效
- 通过jquery addClass()方法,给指定按钮添加高亮显示效果
- jQuery 效果 - 隐藏和显示
- jQuery效果显示隐藏淡入淡出
- jQuery显示隐藏动态效果的几种写法
- 10007---jQuery效果--显示/隐藏
- jQuery效果(一)——隐藏/显示
- jquery通过visible来判断标签是否显示或隐藏
- jquery控制div隐藏与显示的几种效果
- JQuery 效果之隐藏与显示、淡入淡出、滑动、回调