javascript - 使用 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: Unable to get value of the property 'value': object is null or 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，请考虑在文档的就绪事件中调用启动路由。这确保代码在浏览器中加载完整文档后运行。例如

<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>