標籤：style blog http io color ar 使用 sp java
以文字框為例：一、未使用主版頁面js可以使用document.getElementById(‘控制項的ID‘)形式，也可以使用document.getElementById(‘<%=控制項的ID.ClientID %>‘)的形式，代碼如下：
1 <head runat="server"> 2 <title></title> 3 <script type="text/javascript"> 4 function change() { 5 var control = document.getElementById(‘TextBox1‘); 6 //或者是下面的方式 7 //var control = document.getElementById(‘<%=TextBox1.ClientID %>‘); 8 if (control.value != "") { 9 alert("輸入的文本：" + control.value);10 }11 }12 </script>13 </head>14 <body>15 <form id="form1" runat="server">16 <div>17 <asp:TextBox ID="TextBox1" runat="server" onblur="change()"></asp:TextBox>18 </div>19 </form>20 </body>
如果是HTML <input>標籤，取得id的方式和伺服器控制項取得ID的方式一樣，代碼如下：
1 <head runat="server"> 2 <title></title> 3 <script type="text/javascript"> 4 function change() { 5 var control = document.getElementById(‘Text1‘); 6 if (control.value != "") { 7 alert("輸入的文本：" + control.value); 8 } 9 }10 </script>11 </head>12 <body>13 <form id="form1" runat="server">14 <div>15 <input id="Text1" type="text" onblur="change()" />16 </div>17 </form>18 </body>
注意：使用HTML <input>標籤，想在後台取得其Value值（string text = this.Text1.Value;），或者在js用document.getElementById(‘<%=Text1.ClientID %>‘);的形式擷取控制項id，需要變為伺服器控制項，加上runat="server"，即<input id="Text1" type="text" runat="server" onblur="change()">即可，當然，即使加上runat="server"，js也可以使用document.getElementById(‘Text1‘);擷取其id。
二、使用主版頁面①對於標準伺服器控制項，如<asp:TextBox>，js擷取其控制項ID必須使用document.getElementById(‘<%=TextBox1.ClientID %>‘);擷取其ID，代碼如下：
1 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 2 <script type="text/javascript"> 3 function change() { 4 //var control = document.getElementById(‘TextBox1‘);//找不到TextBox1對象 5 var control = document.getElementById(‘TextBox1.ClientID‘); 6 if (control.value != "") { 7 alert("文本為：" + control.value); 8 } 9 }10 </script>11 </asp:Content>12 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">13 <asp:TextBox ID="TextBox1" runat="server" onblur="change()"></asp:TextBox>14 </asp:Content>
如果使用document.getElementById(‘TextBox1‘);會出現如下錯誤：
②對於HTML <input>標籤，如果作為伺服器控制項，即有runat="server"，js擷取其id使用document.getElementById(‘<%=Text1.ClientID %>‘);，如果不作為伺服器控制項，使用document.getElementById(‘Text1‘);擷取其id。否則也會出現的錯誤，代碼如下：
1 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 2 <script type="text/javascript"> 3 function change() { 4 var control = document.getElementById(‘Text1.ClientID‘);//作為伺服器控制項擷取其id 5 //var control = document.getElementById(‘Tex2‘);//作為HTML <input>標籤，擷取其id 6 if (control.value != "") { 7 alert("文本為：" + control.value); 8 } 9 }10 </script>11 </asp:Content>12 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">13 <input id="Text1" type="text" runat="server" onblur="change()"/>14 <%--<input id="Text2" type="text" onblur="change()"/>--%>15 </asp:Content>
註：如果想在後台擷取其文本值，必須將其作為伺服器控制項，即加上runat="server"
③對於伺服器控制項，如果在主版頁面body內的ContentPlaceHolder控制項加上ClientIDMode="Static" 屬性後，內容頁中js擷取伺服器控制項id就可以直接使用其ID名（不用使用<%=控制項ID.ClientID %>），主版頁面代碼如下：
1 <head runat="server"> 2 <title></title> 3 <asp:ContentPlaceHolder ID="head" runat="server"> 4 </asp:ContentPlaceHolder> 5 </head> 6 <body> 7 <form id="form1" runat="server"> 8 <div> 9 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" ClientIDMode="Static">10 11 </asp:ContentPlaceHolder>12 </div>13 </form>14 </body>
內容頁代碼如下：
1 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 2 <script type="text/javascript"> 3 function change(id) { 4 var control = document.getElementById(id); 5 if (control.value != "") { 6 alert("文本為：" + control.value); 7 } 8 } 9 </script>10 </asp:Content>11 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">12 <input id="Text1" type="text" runat="server" onblur="change(this.id)"/><br />13 <asp:TextBox ID="TextBox1" runat="server" onblur="change(this.id)"></asp:TextBox>14 </asp:Content>
asp.net js擷取控制項ID
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
