[研究][JavaScript+Bootstrap Icons]顯示、隱藏密碼
2022-08-20
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#
********************************************************************************
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="WebApplication20.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.9.1/font/bootstrap-icons.min.css" />
</head>
<body>
<form id="form1" runat="server">
<p>
<label for="TextBox_Username">帳號：</label>
<asp:TextBox ID="TextBox_Username" runat="server"></asp:TextBox>
</p>
<p>
<label for="TextBox_Password">密碼：</label>
<asp:TextBox ID="TextBox_Password" TextMode="Password" runat="server"></asp:TextBox>
<i class="bi bi-eye-slash" id="togglePassword"></i>
</p>
<button type="submit" id="submit" class="submit">登入</button>
</form>
<script>
const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#TextBox_Password");
togglePassword.addEventListener("click", function () {
// 切換 type 屬性
const type = password.getAttribute("type") === "password" ? "text" : "password";
password.setAttribute("type", type);
// 切換 icon
this.classList.toggle("bi-eye");
});
</script>
</body>
</html>
|
執行結果
(完)
沒有留言:
張貼留言