给密码框添加一个显示隐藏开关

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>密码显示隐藏</title> <style type="text/css"> @charset "UTF-8"; .ml2 { margin-left: 2rem; } .toggle { background: #ccc; border-radius: 40em; cursor: pointer; display: inline-block; padding: 1px; position: relative; width: 40px; height: 1.25rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; } .toggle:before, .toggle:after { color: #777777; position: absolute; top: 50%; -webkit-transform: translatey(-50%); -ms-transform: translatey(-50%); transform: translatey(-50%); } .toggle:before { content: "✱✱✱"; font-size: 10px; right: 110%; } .toggle:after { content: "ABC"; font-size: 12px; left: 110%; } .toggle.is-alpha .toggle-button { left: 21px; } .toggle-button { background: #fff; border-radius: 40em; display: inline-block; height: 1.25rem; width: 1.25rem; position: absolute; left: 1px; top: 1px; -webkit-transition: left 0.05s linear; transition: left 0.05s linear; } .centerer { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> </head> <body> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <div class="centerer"> <p>输入密码,点击右侧的开关查看效果</p> <input type="password" class="password" /> <div class="toggle ml2"> <div class="toggle-button"></div> </div> </div> <script type="text/javascript"> (function () { $('.toggle').on('click', function () { var password, type; password = $('.password'); type = password.attr('type'); if (type === 'password') { password.attr('type', 'text'); return $(this).addClass('is-alpha'); } else { password.attr('type', 'password'); return $(this).removeClass('is-alpha'); } }); }.call(this)); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 给密码框添加一个显示隐藏开关