浮雲雅築: 密碼

顯示具有密碼標籤的文章。顯示所有文章

2026年6月9日星期二

[研究]Mend (WhiteSource) 建議密碼欄位 HtmlEncode 疑問

[研究]Mend (WhiteSource) 建議密碼欄位 HtmlEncode 疑問

2026-06-09

下圖，Mend (WhiteSource) 建議密碼欄位 HtmlEncode

但依據下面這篇，是不建議的

[研究]Mend (WhiteSource) 喜歡用的 HttpUtility.HtmlEncode 會影響那些字元？https://shaurong.blogspot.com/2026/06/mend-whitesource-httputilityhtmlencode.html

(完)

2022年8月22日星期一

[研究][JavaScript+Bootstrap Icons]顯示、隱藏密碼

[研究][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>

執行結果