javascript不执行

Question

我有一个 JavaScript 函数，可以计算输入到 asp:TextBox 中的字符数。

我将它设置为15个字符进行测试并在其中输入alertBox，但它不起作用。

JavaScript 根本没有执行。

我尝试将字段名称放在<%= %> 块中，但代码仍然没有触发。

这是我的代码：

ASP 代码

<%@ Page Title="Contact Us" Language="vb"  MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Contact.aspx.vb" Inherits="HosJun.Contact" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
   <script src="Scripts/jquery-1.4.1.js"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
   <table width="900" border="0" cellspacing="0" bordercolor="#333366" >
      <tr>
         <td width="900"  valign="top" >
            <div id="middle">
            <div id="middlebox2">
            <table width="96%" border="0" align="center" cellpadding="3" cellspacing="3">
            </table>
            <form id="form1" >
               <table align="center" style="width: 322px">
                  <tr>
                     <td>
                        <asp:Label ID="lblContactMainName" class="lblC" runat="server" Text="Your Name:"></asp:Label>
                     </td>
                     <td class="auto-style4">
                        <asp:TextBox ID="txtContactMainName" runat="server" Width="210px"></asp:TextBox>
                     </td>
                     <td align="left">
                        <asp:RequiredFieldValidator ID="valContactName" runat="server" ErrorMessage="You must enter a contact name" Font-Bold="True" ForeColor="#E46A18" ControlToValidate="txtContactMainName">*</asp:RequiredFieldValidator>
                     </td>
                  </tr>
                  <tr>
                     <td>
                        <asp:Label ID="lblContactMainEmail"  class="lblC" runat="server" Text="Your Email:"></asp:Label>
                     </td>
                     <td class="auto-style4">
                        <asp:TextBox ID="txtContactMainEmail" runat="server" Width="210px" ControlToValidate="txtContactMainEmail"></asp:TextBox>
                     </td>
                     <td align="left">
                        <asp:RequiredFieldValidator ID="valContactEmail" runat="server" ErrorMessage="Please enter a valid email address" Font-Bold="True" ForeColor="#E46A18" ControlToValidate="txtContactMainEmail">*</asp:RequiredFieldValidator>
                     </td>
                  </tr>
                  <tr>
                     <td>
                        <asp:Label ID="lblContactMainSubject"  class="lblC" runat="server" Text="Subject:"></asp:Label>
                     </td>
                     <td class="auto-style4">
                        <asp:DropDownList ID="ddlContactMainSubject" runat="server" Width="215px">
                           <asp:ListItem>FeedBack on a room</asp:ListItem>
                           <asp:ListItem>FeedBack on the Site</asp:ListItem>
                           <asp:ListItem>Suggest a Site</asp:ListItem>
                           <asp:ListItem>Other</asp:ListItem>
                        </asp:DropDownList>
                     </td>
                  </tr>
               </table>
               <table align="center" style="width: 364px">
                  <tr>
                     <td align="left"><span>Comment:</span></td>
                  </tr>
                  <tr>
                     <td align="left" >
                        <asp:TextBox ID="txtComment" runat="server" TextMode="MultiLine" Height="70px" Width="356px"></asp:TextBox>
                        <br />  
                        (<span id="spanComment">15 Characters left</span>)  
                     </td>
                  </tr>
                  <tr>
                     <td align="center" class="auto-style3">
                        <asp:Label ID="lblCaptchaResult" runat="server" Width="356px" Text="Enter the CAPTCHA code below." Height="18px"></asp:Label>
                     </td>
                  </tr>
                  <tr>
                     <td align="center" valign="middle" class="auto-style3">
                        <center style="width: 357px">
                           <asp:TextBox runat="server" ID="txtImg" width="90" valign="top" style="margin-left: 0px" ></asp:TextBox>
                           <asp:Image ID="imgCaptcha" runat="server" valign="top" ></asp:Image>
                        </center>
                     </td>
                  </tr>
                  <tr>
                     <td align="center" class="auto-style3">
                        <center style="width: 355px">
                           <asp:Button ID="Button1" runat="server" autopostback="true" Text="Submit" />
                        </center>
                     </td>
                  </tr>
               </table>
   </table>
   </form>
</asp:Content>

JavaScript 代码

<script src="Scripts/jquery-1.4.1.js"></script>
   <script type="text/javascript">
      //Checking Description Length  
      $('txtComment').keyup(function () {
          alert('Alert');
          var Description = $('txtComment').val();
          var Descriptionlen = Description.length;
          if (Description.length >= 15) {
              this.value = this.value.substring(0, 15);
          }
          $('#spanComment').text(15 - Descriptionlen + ' Characters Left');
      });
      });
   </script>  

关于我做错了什么有什么想法吗？这让我发疯了！

Answer 1

您以错误的方式获取 txtComment 控件。试试这个脚本，我用

替换了 txtComment

<script type="text/javascript">
$(document).ready(function() {
  $('#<%= txtComment.ClientID %>').keyup(function () {
    alert('Alert');
    var Description = $('#<%= txtComment.ClientID %>').val();
    var Descriptionlen = Description.length;
    if (Description.length >= 15) {
      this.value = this.value.substring(0, 15);
    }
    $('#spanComment').text(15 - Descriptionlen + ' Characters Left');
  });
});
</script> 

Answer 2

代替

 $('txtComment')

尝试使用：

$('<%= txtComment.ClientID %>') //UniqueID is another option

您正在呈现的 ID 与您认为它们在代码隐藏中的不同 - 打开 Firebug 或您的开发者控制台，您就会明白我的意思。

Answer 3

如果您使用 id 选择器，您必须使用字符“#”作为控件 id 的前缀。试试

> $('#txtComment').keyup(function () {...});

Answer 4

看起来你的脚本可能试图在 dom 准备好之前执行。试试这个

$(document).ready(){
    //Checking Description Length  
    $('txtComment').keyup(function () {
        alert('Alert');
        var Description = $('txtComment').val();
        var Descriptionlen = Description.length;
        if (Description.length >= 15) {
            this.value = this.value.substring(0, 15);
        }
        $('#spanComment').text(15 - Descriptionlen + ' Characters Left');
    });
}