如何在位于详细信息视图 (ASP.NET) 中的文本框上使用动态字符计数脚本

Question

我想要实现一个字符计数器，显示您在 ASP.NET 网页上的文本框中键入的字符数。该文本框嵌套在DetailsView 中。

下面列出的包括（字符计数脚本）+（文本框的onkeypress）+（只读输入）的正常解决方案不起作用：

脚本：

<script type="text/javascript">

    function textCounter(field, countfield, maxlimit) {
        if (field.value.length > maxlimit)
            field.value = field.value.substring(0, maxlimit);
        else
            countfield.value = maxlimit - field.value.length;
    }

</script>

文本框：

<asp:TextBox ID="TextBox1" runat="server" 
onkeyup="textCounter(TextBox1, this.DetailsView.remLen, 300);"
onkeydown="textCounter(TextBox1, this.DetailsView.remLen, 300);"
TextMode="MultiLine" Text='<%# Bind("idea") %>'></asp:TextBox>

和输入（位于详细信息视图中）：

<input readonly="readonly" type="text" name="remLen" value="300" />

然后我 发现嵌套了一个文本框在详细信息视图中搞乱了文本框的命名约定。我尝试了该链接中的 C# 解决方案，但它无法工作...

我怎样才能使其工作？ JQuery 似乎是一个答案，但我不知道像 var Text = $("span[id$=TextBox1]"); 这样的代码适合我的文件。需要帮助！

我正在 VB 中使用 Microsoft Visual Web Developer 2010 Express（我是一个菜鸟，主要使用程序的图形 UI，在 Android 上有一些 Java 编程经验）。如果有人有 C# 解决方案，我不会介意。

Answer 1

如果它位于详细信息视图内，您可能必须使用 FindControl。例子：

<asp:TextBox ID="TextBox1" runat="server" 
onkeyup="textCounter('<%= ((TextBox)myDetailView.FindControl("TextBox1")).ClientID; %>', this.DetailsView.remLen, 300);"
onkeydown="textCounter('<%= ((TextBox)myDetailView.FindControl("TextBox1")).ClientID; %>', this.DetailsView.remLen, 300);"
TextMode="MultiLine" Text='<%# Bind("idea") %>'></asp:TextBox>

Answer 2

如果您使用的是 ASP.NET 4.0 或更高版本，则可以将 ClientIDMode 属性设置为 static。这会保留控件的 id，而不是由 .NET 重命名它；例如，LogoImageButton 将被保留，而不是 .NET 将其呈现为 ctl00_LogoImageButton。现在您的 JavaScript 可以找到您的控件。

免责声明：
我在 ContentPlaceHolder 级别设置 ClientIDMode="Static" 以向文本框添加计数器，这样我就知道它可以工作。但根据 Rick Strahl（他是一个非常聪明的人）的说法，您不能使用控件并指定 ClientIDMode。就像我说的，我的实现工作如此...

无论如何，我建议您阅读 Rick 关于该主题的博客，因为他涵盖了一些与继承相关的重要问题。还有一些关于实现同一目标的替代方法的有趣评论。 也许其中一个也可以工作

即使您使用的是早期版本的 .NET Rick 的博客， ：http://www.west-wind.com/weblog/posts/2009/Nov/07/ClientIDMode-in-ASPNET-40

Answer 3

您需要使用文本框的 ClientID 属性在运行时在 JavaScript 中获取它：

<asp:TextBox ID="TextBox1" runat="server" 
onkeyup="textCounter('<%= TextBox1.ClientID %>', this.DetailsView.remLen, 300);"
onkeydown="textCounter('<%= TextBox1.ClientID %>', this.DetailsView.remLen, 300);"
TextMode="MultiLine" Text='<%# Bind("idea") %>'></asp:TextBox>