[研究][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
沒有留言:
張貼留言