Question

我有以下textarea：

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

编辑：任何想法我如何迎合后退（因此没有任何字符增加）？

Answer 1

如果你正在使用C＃4+，你可能需要使用ClientIDMode = Static来完成这项工作，否则你的id将被asp.net渲染引擎更改，而不是TxtBox200

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

如果你正在使用C＃＆lt; 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() {...}

Answer 2

因为在生成的HTML中，TxtBox200实际上并未被称为TxtBox200。试试这个：

$('<%= TxtBox200.ClientID %>').keypress(function() {

Answer 3

尝试在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>

Answer 4

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

$('[id$=TxtBox200]').keypress(function() {

Answer 5

所以有两个问题：

首先，你的jQuery keypress函数不在DOM ready事件中，所以它试图在文本框可用之前绑定到你的文本框，所以改为编写你的脚本：

$(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为TxtBox200，因此jQuery选择器中的.ClientID会引用它。

ASP.NET中的字符数

5 个答案: