javascript实现密码显示和隐藏
<!Doctype html> <html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>[[#{text.suffix}]]</title> <meta http-equiv="Cache-Control" content="no-siteapp"/> <link rel="shortcut icon" th:href="@{/img/favicon.ico}"/> <script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}" ></script> <link rel="stylesheet" th:href="@{/css/amazeui.min.css}"/> <link rel="stylesheet" th:href="@{/css/app.css}"/> <style type="text/css"> .status{ width: 200px; height: 20px; color: #FFFF00; font-size:15px; } #addressTitle{ font-size: 5px; } </style> </head> <body> <div class="log"> <div class="am-g"> <div class="am-u-lg-3 am-u-md-6 am-u-sm-8 am-u-sm-centered log-content"> <h1 class="log-title am-animation-slide-top"> 不忘初心 <p id="status" class="status"></p> </h1> <span id="time"></span> <br> <form class="am-form" id="loginForm"> <div class="am-input-group am-radius am-animation-slide-left"> <input type="text" id="user" class="am-radius" autocomplete="off" placeholder="请输入用户名"/> <span class="am-input-group-label log-icon am-radius"><i class="am-icon-user am-icon-sm am-icon-fw"></i>用户名</span> </div> <br> <div class="am-input-group am-animation-slide-left log-animation-delay"> <input class="am-form-field am-radius log-input" id="pwd" placeholder="请输入密码" type="password"/> <span class="am-input-group-label log-icon am-radius"><i class="am-icon-lock am-icon-sm am-icon-fw"> </i> <input type="button" class="btn btn-default" id="btn" value="显示" onclick="change()"> </span> </div> <label><input id="remember" type="checkbox">记住密码</label><br> <button type="button" class="am-btn am-btn-primary am-btn-block am-btn-lg am-radius am-animation-slide-bottom log-animation-delay" onclick="checkForm()"> 登 录 </button> <a href="/toRe">注册</a> <a href="/user/toResetPwd">忘记密码?</a> </form> </div> </div> </div> <script type="text/javascript"> let btn=document.getElementById("btn"); let pwd=document.getElementById("pwd"); function change(){ if (btn.value=='显示'){ pwd.type="text"; btn.value="隐藏"; }else { pwd.type="password"; btn.value="显示"; } } </script> </body> </html>