使用ClientID从文本框中获取值不支持JavaScript

Using ClientID to get value from textbox does not work with JavaScript

本文关键字：获取 不支持 JavaScript ClientID 文本 使用      更新时间：2023-09-26

我已经看到了一些关于如何使用JavaScript从文本框中获取值的示例，当控件位于使用MasterPage的页面上时。但是，它不适合我。

下面是我的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"的值:对象是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>

对javascript方法changeRedTextToBlackMasterPage()的调用必须放在aspx文件中声明文本控件之后。但是，实际的方法可以在之前或之后编写。请注意，您的问题与母版页是否存在无关。

请看下面的代码片段:

<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>
相关文章：