javascript - 如何切换密码可见性?
问题描述
我正在尝试创建一个登录页面,并且在其中,我希望有一个按钮或复选框来切换密码的可见性。HTML 是:
function showPassword(){
var pass = document.getElementById("Password");
if (pass.type === "password") {
pass.type = "text";
}
else {
pass.type = "password";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/ad6a81734d.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="~/css/custom.css"/>
</head>
<h1 id="login_header">Login</h1>
<div class="row">
<div class="col-md-12">
<form method="post">
<div class="text-danger validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>
<div id ="log_reg" class="form-group">
<i class="fas fa-envelope" aria-hidden="true"></i>
<label for="Email">Email</label>
<input class="form-control" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
<div id ="log_reg"class="form-group">
<i class="fas fa-key" aria-hidden="true"></i>
<label for="Password">Password</label>
<input class="form-control" type="password" data-val="true" data-val-required="The Password field is required." id="Password" name="Password">
<span class="text-danger field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
<input class="form-control" type="checkbox" data-val="false" id="Show Password" onclick="showPassword()" />
</div>
<div class="custom-checkbox">
<label for="RememberMe">
<input class="form-control" type="checkbox" data-val="true" data-val-required="The Remember me field is required." id="RememberMe" name="RememberMe" value="true">
Remember me
</label>
</div>
<button id="button1" type="submit" class="btn btn-primary">Login</button>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8OZRytqGjWNEjmm5lNWbbA4QbTKNuzp2dAWmUxUXfDlU4MdRo0VC9BJ7Irjjcx-3bsw-uBfYK-9723M-E4t0uFUUXglXGEGD7bAuWsxnMzHhX0hwOTX1p-bejSkH4ONUDjfhMOyBcMNpkmty_dYln1M"><input name="RememberMe" type="hidden" value="false"></form>
</div>
</div>
我不知道我在这里做错了什么,但是当我去检查复选框时,密码字段保持不变并且不会显示自己。我尝试在 HTML 文件中放置一个脚本标签,但它什么也没做。
解决方案
我知道没有“切换元素”功能,所以我这样做。
<!DOCTYPE html>
<html>
<body>
Password: <input type="password" value="password" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Show the Password
<script>
function myFunction() {
var pw_ele = document.getElementById("myInput");
if (pw_ele.type === "password") {
pw_ele.type = "text";
} else {
pw_ele.type = "password";
}
}
</script>
</body>
</html>
推荐阅读
- typo3 - 选择新语言后的typo3语言选择器问题
- powershell - powershell system.object 数组到字符串
- java - 安装了两个 Visual Studio:VS2015 和 VS2017。在VS2017中,查看activity_main.xml时遇到问题
- git - GitLab 在哪里构建应用程序?
- docker - Docker TICK Sandbox 不提供 UDF Python 功能
- instagram - Instagram API 关闭时第三方应用程序如何访问数据?
- css - 对空白使用媒体断点?
- c# - 将布尔值从一个窗口传递到另一个窗口
- csv - Haskell中的木薯解析错误
- r - 如何在 R 中向美国地图添加其他维度?