0

我有以下文本区域：

<asp:TextBox ID="TxtBox200" runat="server" 
        TextMode="MultiLine" MaxLength="200" ></asp:TextBox>
<span id="charCount"></span>

为什么以下 javascript 不起作用：

<script>
    $('#TxtBox200').keypress(function() {
    var max = 200;
    var textLen = $(this).val().length;
    var textLeft = max - textLen;
    $('#charCount').text(
        textLeft + ' character' + (textLeft == 1 ? '' : 's') + ' left'
    );
});
</script>

编辑：有什么想法可以满足后备箱的需求（因此剩下的字符数不会增加）？

4

5 回答 5

4

如果您使用的是 C# 4+，您可能需要使用ClientIDMode = Static它来完成这项工作，否则您的 id 将被 asp.net 渲染引擎更改并且不会TxtBox200

<asp:TextBox ID="TxtBox200" runat="server" ClientIDMode="Static"
    TextMode="MultiLine" MaxLength="200" >

如果您使用的是 C# < 4 并且您的 javascript 代码是内联的，请使用 @Sean Bright 答案。如果它位于单独的 js 文件中，则需要将 id 作为参数传递或使用 css 类作为选择器。

<asp:TextBox ID="TxtBox200" runat="server" ClientIDMode="Static"
    TextMode="MultiLine" MaxLength="200" CssClass="TxtBox200" >

你的选择器将是

$('input.TxtBox200').keypress(function() {...}
于 2013-07-19T12:24:35.733 回答
3

因为在生成的 HTML 中，TxtBox200实际上并没有调用TxtBox200. 试试这个：

$('<%= TxtBox200.ClientID %>').keypress(function() {
于 2013-07-19T12:24:43.320 回答
1

尝试在 window.load 事件中包含您的 JavaScript 代码

<script>
  $(document).ready(function (e) {
    $('#TxtBox200').keypress(function() {
    var max = 200;
    var textLen = $(this).val().length;
    var textLeft = max - textLen;
    $('#charCount').text(
        textLeft + ' character' + (textLeft == 1 ? '' : 's') + ' left'
    );
});
 });
</script>
于 2013-07-19T12:25:09.493 回答
0

检查以确保您的 ID 与客户端文本框的 ID 相同，因为 asp.net 可以更改它。将 ClientID 模式设为静态 ( http://www.devcurry.com/2009/08/clientid-mode-in-aspnet-40.html ) 或执行以下操作：

$('[id$=TxtBox200]').keypress(function() {
于 2013-07-19T12:27:56.293 回答
0

所以有2个问题：

首先，您的 jQuery keypress 函数不在 DOM 就绪事件中，因此它会尝试在文本框可用之前绑定到您的文本框，因此请编写如下脚本：

$(document).ready(function() {
        $('#<%= TxtBox200.ClientID %>').keypress(function(e) {
            alert('Key pressed.');
            var max = 200;
            var textLen = $(this).val().length;
            var textLeft = max - textLen;
            $('#charCount').text(
                textLeft + ' character' + (textLeft == 1 ? '' : 's') + ' left'
            );
        });
    });

其次，您需要在 jQuery 选择器中以不同的方式引用您的 ASP.NET 服务器控件，因为 ASP.NET 默认应用分层命名约定（即 MainContent_ctl100）。您可以强制 ASP.NET 服务器控件将客户端名称设为静态，如下所示：

<asp:TextBox ID="TxtBox200" runat="server" 
             TextMode="MultiLine" MaxLength="200" ClientIDMode="Static" ></asp:TextBox>

这将使TextBox' 的 ID 成为并因此在 jQuery 选择器中TxtBox200被引用。.ClientID

于 2013-07-19T12:39:08.787 回答