浮雲雅築: 顯示密碼

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

2022年4月12日星期二

[研究][ASP.NET]登入畫面表單美工設計(一)

[研究][ASP.NET]登入畫面表單美工設計(一)

2022-04-12

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#

只是設計一個還可以看的畫面，筆記一下。

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
    Inherits="WebApplication1.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>
    <%--和 bootstrap.css 不相容--%>
    <%--<link href="Content/bootstrap.css" rel="stylesheet" />--%>
    <style>
        .submitButton {
            text-align: right;
            padding-right: 10px;
        }
    </style>
       <script>
        function ShowPwd() {
            var x = document.getElementById("TextBoxPassword");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
       </script>
</head>
<body>
    <form id="form1" runat="server">
        <h1>登入</h1>
        <div style="width: 20%;">
            <fieldset style="border-radius: 10px; background-color: #eeeeee;">
                <legend>帳戶資訊</legend>
                <p>
                    <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">帳號：</asp:Label>
                    <asp:TextBox ID="UserName" runat="server" PlaceHolder="請輸入" required="required"></asp:TextBox>
                </p>
                <p>
                    <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" Text="password">密碼：</asp:Label>
                    <asp:TextBox ID="TextBoxPassword" runat="server" TextMode="Password" PlaceHolder="請輸入" required="required"></asp:TextBox>
                    <%--<input type="checkbox" onclick="ShowPwd()">顯示密碼--%>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <asp:CheckBox ID="CheckBox1" OnClick="ShowPwd()" runat="server" Text="顯示密碼" />
                </p>
            </fieldset>
            <p class="submitButton">
                <asp:Button ID="LogOnButton" runat="server" CommandName="LogOn" Text="登入" />&nbsp;
                <asp:Button ID="Button_FogotPassword" runat="server" Text="忘記密碼" />
            </p>
        </div>
    </form>
    <asp:Label ID="Label_Message" runat="server" Text=""></asp:Label>
</body>
</html>

結果

(完)

相關

[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能
[研究][ASP.NET]JavaScript 抓取 ContentPlaceHolder 中 ASP.NET 控制項的 ID
https://shaurong.blogspot.com/2022/04/aspnetmasterpagecontentplaceholder.html

[研究][JavaScript]切換顯示和隱藏密碼
http://shaurong.blogspot.com/2019/02/javascript.html

[研究][ASP.NET]讓超連結或 LinkButton 看起來像是按鈕
https://shaurong.blogspot.com/2022/04/aspnet-linkbutton.html

[研究][ASP.NET]登入畫面表單美工設計(六)

https://shaurong.blogspot.com/2022/04/aspnet_50.html

[研究][ASP.NET]登入畫面表單美工設計(五)

https://shaurong.blogspot.com/2022/04/aspnet_85.html

[研究][ASP.NET]登入畫面表單美工設計(四)

https://shaurong.blogspot.com/2022/04/aspnet_24.html

[研究][ASP.NET]登入畫面表單美工設計(三)
https://shaurong.blogspot.com/2022/04/aspnet_14.html

[研究][ASP.NET]登入畫面表單美工設計(二)
https://shaurong.blogspot.com/2022/04/aspnet_12.html

[研究][ASP.NET]登入畫面表單美工設計(一)
https://shaurong.blogspot.com/2022/04/aspnet.html

2019年2月22日星期五

[研究][JavaScript]切換顯示和隱藏密碼

[研究][JavaScript]切換顯示和隱藏密碼

2019-02-22

使用 CheckBox 切換顯示和隱藏密碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
密碼：<input type="password" id="pwd">
<input type="checkbox" onclick="ShowPwd()">顯示密碼

<script>
function ShowPwd() {
var x = document.getElementById("pwd");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</body>
</html>

(下圖)眼睛符號切換回來後好像不會再顯示

********************************************************************************
使用 HyperLink 切換顯示和隱藏密碼

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="box">
<form name="forms" action="" method="post">
<label for="">帳號：</label>
<input id="username" name="username" /></span><br />
<label for="">密碼：</label>
<span class="box"><input id="pwd" type="password" name="pws" /></span>
<span class="box" id="btn"><a href="javascript:showPwdFunc();">顯示密碼</a></span>
</form>
</div>
<script>
var ele = {
pwd: document.getElementById('pwd'),
btn: document.getElementById('btn'),
showPwd: '<a href="javascript:showPwdFunc();">顯示密碼</a>',
hidePwd: '<a href="javascript:hidePwdFunc();">隱藏密碼</a>'
}
function showPwdFunc() {
if (ele.pwd.type === 'password') {
ele.pwd.type = 'text';
ele.btn.innerHTML = ele.hidePwd;
}
}
function hidePwdFunc() {
if (ele.pwd.type === 'text') {
ele.pwd.type = 'password';
ele.btn.innerHTML = ele.showPwd;
}
}
</script>
</body>
</html>

********************************************************************************
使用 Button 切換顯示和隱藏密碼

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form name="forms" action="" method="post">
帳號：<input id="username" name="username" /><br />
密碼：<input id="pwd" type="password" name="pws" />
<input id="btn1" type="button" value="顯示密碼" />
</form>
<script>
window.onload = function () {
var pwd = document.getElementById('pwd');
var btn = document.getElementById('btn1');
var showHide = true;
btn.onclick = function () {
if (showHide) {
pwd.type = 'text';
showHide = false;
btn.value = '隱藏密碼';
}
else {
pwd.type = 'password';
showHide = true;
btn.value = '顯示密碼';
}
}
}
</script>
</body>
</html>

(完)

相關

[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能
https://shaurong.blogspot.com/2022/04/aspnetmasterpagecontentplaceholder.html

[研究][ASP.NET]JavaScript 抓取 ContentPlaceHolder 中 ASP.NET 控制項的 ID
https://shaurong.blogspot.com/2022/04/aspnetmasterpagecontentplaceholder.html

[研究][JavaScript]切換顯示和隱藏密碼
https://shaurong.blogspot.com/2019/02/javascript.html

[研究][ASP.NET][JavaScript] hideShowPassword 與 Fortify SCA 白箱測試
https://shaurong.blogspot.com/2018/04/aspnetjavascript-hideshowpassword.html

[研究][ASP.NET][JavaScript]hideShowPassword v2.1.1元件安裝、試用
https://shaurong.blogspot.com/2017/11/aspnet-hideshowpassword.html

2017年1月24日星期二

[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(一)初次試用

[研究][JavaScript][C#][ASP.NET] Select2 v4.0.3 - jQuery Plugin 安裝 - 讓 DropDownList 可以輸入關鍵字，即時過濾顯示下拉選項

2017-01-24
2019-01-29 更新

Select2 | jQuery Plugin Registry v4.0.3
https://plugins.jquery.com/select2/

Select2 - The jQuery replacement for select boxes v3.5.1
https://select2.github.io/

其中 select2.css 中寫

Select2 Bootstrap Theme v0.1.0-beta.9

/*!
* Select2 Bootstrap Theme v0.1.0-beta.9 (https://select2.github.io/select2-bootstrap-theme)
* Copyright 2015-2016 Florian Kissling and contributors (https://github.com/select2/select2-bootstrap-theme/graphs/contributors)
* Licensed under MIT (https://github.com/select2/select2-bootstrap-theme/blob/master/LICENSE)

2019-01-29 補充

如果 select 可設定 class，DropDownList 可設定 CssClass

<script type="text/javascript">
        $(document).ready(function () {
            $(".Select2Class").select2();
        });
    </script>

PS：放 </body> 之前

如果 DropDownList1 沒有在任何 Control 之中 (ex : DetailsView, GridView, ...)

PS：放 </body> 之前

會被 IIS 翻譯成下面，name 和 id 會相同

<select name="DropDownList1" id="DropDownList1">
<option value="apple">apple</option>
<option value="pine-apple">pine-apple</option>
<option value="banana">banana</option>
</select>

*****

如果 DropDownList2 在任何 Control 之中 (ex : DetailsView, GridView, ...)

**********
對於有「主版頁面」MasterPage.master 的網頁

會被 IIS翻譯成

而

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
...(略)
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
...(略)

</asp:Content>

會被 IIS翻譯成下面，name 和 id 不一致，導致 select2() 無法運作
因為 select2 找 name 為 ContentPlaceHolder1_DropDownList1 的，沒找到

如果自己替 DropDownList 加上 name 屬性

<asp:DropDownList name="ctl100$ContentPlaceHolder1_DropDownList1" ID="DropDownList1" runat="server">

</asp:DropDownList>

會被 IIS翻譯成 (變成2個 name 屬性)

也不行。

解決方式是 ClientIDMode ，使用 clientIDMode="Predictable" 或 ClientIDMode="Static"

Web.Config 中

<system.web>
<pages clientIDMode="Predictable" >
<system.web>

或

<asp:DropDownList clientIDMode="Predictable" ID="DropDownList1">
</asp:DropDownList>

**********

但實際測試有問題

<asp:TextBox ID="TextBox1" ClientIDMode="Predictable" required="required" TextMode="Password" AutoComplete="Off" runat="server"></asp:TextBox>
<br />
<asp:DropDownList ID="DropDownList1" ClientIDMode="Predictable" runat="server"></asp:DropDownList>

HTML Source ( ClientIDMode="Predictable" 不見了)

<input name="ctl00$ContentPlaceHolder1$TextBox1" type="password" id="ContentPlaceHolder1_TextBox1" required="required" AutoComplete="Off" />
<br />
<input id="ContentPlaceHolder1_CheckBox1" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" onclick="ShowPW1();" />
<label for="ContentPlaceHolder1_CheckBox1">顯示密碼</label>
<select name="ctl00$ContentPlaceHolder1$DropDownList1" id="ContentPlaceHolder1_DropDownList1">

ClientIDMode="Predictable" 只支援 ListView，不支援其它？？？(待測)

https://docs.microsoft.com/zh-tw/dotnet/api/system.web.ui.control.clientidmode?view=netframework-4.8

(完)

相關

[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(二)各種ID存取狀況

https://shaurong.blogspot.com/2022/05/aspnetselect2-v403-id.html

[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(一)初次試用

http://shaurong.blogspot.com/2017/01/caspnet-select2-v403-jquery-plugin.html

訂閱：文章 (Atom)

2022年4月12日 星期二

[研究][ASP.NET]登入畫面表單美工設計(一)

2019年2月22日 星期五

[研究][JavaScript]切換顯示和隱藏密碼

2017年1月24日 星期二

[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(一)初次試用

2022年4月12日星期二

2019年2月22日星期五

2017年1月24日星期二