[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能
[研究][ASP.NET]JavaScript 抓取 ContentPlaceHolder 中 ASP.NET 控制項的 ID
2022-04-27
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#
ASP.NET控制項(Control)的 ID，如果是在 MasterPage 架構的 ContentPlaceHolder1 中，在瀏覽器中看到的 ID 變更。
********************************************************************************
Site1.master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Site1" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
|
Default.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master"
AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="WebApplication1.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script>
function ShowPW() {
var x = document.getElementById("ContentPlaceHolder1_TextBox1");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:TextBox ID="TextBox1" required="required" TextMode="Password"
AutoComplete="Off" runat="server"></asp:TextBox>
<br />
<asp:CheckBox ID="CheckBox1" Text="顯示密碼" OnClick="ShowPW()" runat="server" />
<br />
</asp:Content>
|
瀏覽器看到的 HTML Source
原來在 .aspx 中的 ID 是 TextBox1，現在變成了 ContentPlaceHolder1_TextBox1，所以 JavaScript 要抓取時，不能用 TextBox1，要用 ContentPlaceHolder1_TextBox1。
另外很多情況下 HTML 元素 (element) 的 ID 和 name 是相同的，但此時不同，不要錯用了 name 的 ctl00$ContentPlaceHolder1$TextBox1
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
</title>
<script>
function ShowPW() {
var x = document.getElementById("ContentPlaceHolder1_TextBox1");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</head>
<body>
<form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="zAE3P/7wt0M3uv/5llCSAr3yf1PYvO8mEmfl6tswaGanRIG/x4nfITMOV5YGUgeLMHwaNhnfWljHJTTBC2TZ45KhDzFigI1gv5UL8n6PYkKT/xzB4XP6NCz1FMeNwvEQ4ROBEG2cz4Ldmpz+AjDxzMXzThdSyXoXdkdLqMgJyBYupUKulNKCHi1ahgWWBU3s" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="ESsA+ggMfjTJUH5bZ2Ix51c3ZJSrS30FLzobHXB//9f+pkaGPz/XpxMB0qtWzrGdAYXQO15QnOIwvAsrW3xORSbmc5iKMedbRkWkZzOg2aDJlloKooaor6L1rL71cB/6eP3190y1XdCMp7erjYcfGQ==" />
</div>
<div>
<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="ShowPW();" /><label for="ContentPlaceHolder1_CheckBox1">顯示密碼</label>
<br />
</div>
</form>
</body>
</html>
|
(完)
相關
[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能
[研究][ASP.NET]JavaScript 抓取 ContentPlaceHolder 中 ASP.NET 控制項的 ID
https://shaurong.blogspot.com/2022/04/aspnetmasterpagecontentplaceholder.html
[研究][ASP.NET]登入畫面表單美工設計(一)
https://shaurong.blogspot.com/2022/04/aspnet.html
[研究][JavaScript]切換顯示和隱藏密碼
https://shaurong.blogspot.com/2019/02/javascript.html
[研究][JavaScript][C#][ASP.NET] Select2 v4.0.3 - jQuery Plugin 安裝 - 讓 DropDownList 可以輸入關鍵字，即時過濾顯示下拉選項
https://shaurong.blogspot.com/2017/01/caspnet-select2-v403-jquery-plugin.html
