使用ClientID從文本框中獲取值不適用於JavaScript

Question

我已經看到了一些關於如何在控件位於使用MasterPage的頁面上從JavaScript文本框中獲取值的示例。 但是，它對我不起作用。

這是我的JavaScript代碼：

function changeRedTextToBlackMasterPage()
{
// Get the value for the textboxes:
var userNameEntry = document.getElementById('<%= UserName_tbx.ClientID %>').value;

注意：該功能位於單獨的JavaScript文件中。

這是頁面源：

<input name="ctl00$ContentsPlaceHolder1$UserName_tbx" type="text" value="ww" maxlength="20" id="ctl00_ContentsPlaceHolder1_UserName_tbx" onblur="changeRedTextToBlackMasterPage()" style="width:150px;" />

這是我得到的錯誤：

SCRIPT5007：無法獲取屬性“value”的值：object為null或undefined

如果我在JavaScript函數中使用生成的頁面中的ID，則代碼可以正常工作。

var userNameEntry = document.getElementById('ctl00_ContentsPlaceHolder1_UserName_tbx').value;

那么，為什么在這種情況下不使用ClientID工作呢？ 文本框位於表格中。 但是，我認為這不會有所作為。 （我是否在我看不到的代碼中輸入錯誤？我嘗試將示例復制/粘貼到我的代碼中以進行比較。）

以下是從頁面到定義文本框的其余代碼：

<%@ Page Language="C#" MasterPageFile="~/RaptorNestSurveyMaster01.master" AutoEventWireup="true" CodeFile="EditUserInformation.aspx.cs" Inherits="EditUserInformation" Title="Edit User Information Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentsPlaceHolder1" Runat="Server">

<div>
<asp:label ID="PageTitle_lbl" runat="server" CssClass="pageTitle" text="Edit User Information Page" />
<br /> <br /> <br /> 
  <table>
    <tr>
       <td>
         <asp:Label ID="UserName_lbl" runat="server" Text="User Name:"></asp:Label> 
       </td>
       <td style="width: 745px">
         <asp:TextBox ID="UserName_tbx" runat="server" MaxLength="20" Width="150" onblur="changeRedTextToBlackMasterPage()" ></asp:TextBox>&nbsp;
         <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName_tbx" ErrorMessage="User Name is required."></asp:RequiredFieldValidator>
         <asp:Label ID="UserNameErrorMessage_lbl" runat="server" ForeColor="Red" Text="" Visible="false"></asp:Label>
       </td> 
     </tr>    

Answer 1

在aspx文件中聲明文本控件之后，必須放置對javascript方法changeRedTextToBlackMasterPage()的調用。 但是，實際的方法可以在之前或之后寫入。 請注意，您的問題與母版頁的存在無關。

請查看以下有效的代碼段：

<script type="text/javascript">
    function changeRedTextToBlackMasterPage() {
        // Get the value for the textboxes:
        var userNameEntry = document.getElementById('<%= UserName_tbx.ClientID %>').value;
        alert(userNameEntry);
    }
</script>

<div>
    <table>
        <tr>
           <td>
             <asp:Label ID="UserName_lbl" runat="server" Text="User Name:"></asp:Label> 
           </td>
           <td style="width: 745px">
             <asp:TextBox ID="UserName_tbx" runat="server" MaxLength="20" Width="150" onblur="changeRedTextToBlackMasterPage()" >pop</asp:TextBox>&nbsp;
             <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName_tbx" ErrorMessage="User Name is required."></asp:RequiredFieldValidator>
             <asp:Label ID="UserNameErrorMessage_lbl" runat="server" ForeColor="Red" Text="" Visible="false"></asp:Label>
           </td> 
         </tr>    
    </table>
</div>

<script type="text/javascript">
    changeRedTextToBlackMasterPage();
</script>

這是使用JavaScript最常見的陷阱之一。 如果您已經在使用JQuery，請考慮在文檔的ready事件中調用啟動路由。 這可確保在瀏覽器中加載完整文檔后運行代碼。 例如

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

    function changeRedTextToBlackMasterPage() {
        // Get the value for the textboxes:
        var userNameEntry = document.getElementById('<%= UserName_tbx.ClientID %>').value;
        alert(userNameEntry);
    }
</script>

<div>
    <table>
        <tr>
           <td>
             <asp:Label ID="UserName_lbl" runat="server" Text="User Name:"></asp:Label> 
           </td>
           <td style="width: 745px">
             <asp:TextBox ID="UserName_tbx" runat="server" MaxLength="20" Width="150" onblur="changeRedTextToBlackMasterPage()" >pop</asp:TextBox>&nbsp;
             <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName_tbx" ErrorMessage="User Name is required."></asp:RequiredFieldValidator>
             <asp:Label ID="UserNameErrorMessage_lbl" runat="server" ForeColor="Red" Text="" Visible="false"></asp:Label>
           </td> 
         </tr>    
    </table>
</div>