Javascript ASP.NET中的字符计数

我有以下文本区域：

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

$（'#TxtBox200'）。按键（函数（）{
var max=200；
var textLen=$（this）.val（）.length；
var textLeft=最大值-textLen；
$（'#charCount'）。文本(
textLeft+'字符'+（textLeft==1？'''s'）+'左'
);
});

编辑：有什么想法我可以满足backsape（因此剩余字符数增加）？

如果您使用的是C#4+，您可能需要使用

clientdmode=Static

，否则您的id将由asp.net渲染引擎更改，而不是

TxtBox200

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

---

因为在生成的HTML中，

TxtBox200

实际上没有被调用

TxtBox200

。请尝试以下方法：

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

$（''）.keypress（函数（）{

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

$（文档）.ready（函数（e）{
$（'#TxtBox200'）。按键（函数（）{
var max=200；
var textLen=$（this）.val（）.length；
var textLeft=最大值-textLen；
$（'#charCount'）。文本(
textLeft+'字符'+（textLeft==1？'''s'）+'左'
);
});
});

检查以确保您的ID与客户端的文本框相同，因为asp.net可以更改它。将ClientID模式设为静态（）或执行类似操作：

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

---

因此有两个问题：

首先，您的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'
            );
        });
    });

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

$（文档）.ready（函数（）{
$（'#'）。按键（功能（e）{
警报（'按键'）；
var max=200；
var textLen=$（this）.val（）.length；
var textLeft=最大值-textLen；
$（'#charCount'）。文本(
textLeft+'字符'+（textLeft==1？'''s'）+'左'
);
});
});

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

$(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'
            );
        });
    });

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

---

这将使

TextBox

的ID成为

TxtBox200

，从而被jQuery选择器中的

.ClientID

引用。

我做ASP.NET开发已经有几年了，但我不知道

clientMode

。这可能是一个更好的解决方案。感谢这解决了我一半的问题，另一半没有o像Claudio建议的那样将ClientMode添加到静态