Question

我正在尝试创建一个登录页面，在该页面中，我希望有一个按钮或复选框可以切换密码的可见性。 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文件中，但是它什么也没做。

Answer 1

function showPassword() {
  const password = document.querySelector('#Password');
  password.type = (password.type==="password") ? "text" : "password";
  password.focus();
}

<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>

Answer 2

You can simply do like this

function togglePassword(){
var type = document.getElementById("Password").type;
if(type=='password'){
 document.getElementById("Password").type = "text";
 }else{
  document.getElementById("Password").type = "password";
 }
}

<input type="password" id="Password" name="Password">
 
<input class="form-control" type="checkbox" onclick="togglePassword()" />

Answer 3

我不知道“切换元素”功能，所以我是这样做的。

<!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>

如何切换密码可见性？

3 个答案: