ASP.NET JS多个文本框字符计数器

Question

我尝试创建jQuery脚本，该脚本将计算我的多行文本框中的字符数。当我为单身做事时，一切都可以。但是我有很多多行文本框。我可以使我的sript更强大，以便我不必手动设置每个文本框吗？我为单个文本框做了：

在这里我的文本框：

<asp:TextBox ID="TextBox585" runat="server" Width="99%" TextMode="MultiLine"  ToolTip = "blabla"></asp:TextBox>
                        <br />
                        <div id="TextBox585_feedback" style="text-align: right">

附带的脚本：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var text_max = 1000;
        function ValidateTextBoxLen(textBox, textBoxFeedBack) {
            var text_length = textBox.val().length;
            var remaining = text_max - text_length;
            if (remaining < 0) {
                textBoxFeedBack.html('Will be cut ' + (0 - remaining) + ' characters.');
            } else {
                textBoxFeedBack.html('Remaining characters: ' + remaining);
            }
        }
     $('#MainContent_TextBox585').keyup(function () { ValidateTextBoxLen($('#MainContent_TextBox585'), $('#TextBox585_feedback')); });

    });
    </script>

和vb.net代码将最大字符设置为多行文本框：

TextBox585.Attributes.Add("maxlength", "1000")

Answer 1

只需更改脚本以查看分配给每个文本框的类规则，因为您当前参考文本框的ID，这总是每个文本框唯一的。

<asp:TextBox ID="TextBox585" runat="server" {class="validatable_textbox"} Width="99%" TextMode="MultiLine"  ToolTip = "blabla"></asp:TextBox>

然后可以将脚本修改为以下内容：

$(document).ready(function () {
        var text_max = 1000;
        function ValidateTextBoxLen(textBox, textBoxFeedBack) {
            var text_length = textBox.val().length;
            var remaining = text_max - text_length;
            if (remaining < 0) {
                textBoxFeedBack.html('Will be cut ' + (0 - remaining) + ' characters.');
            } else {
                textBoxFeedBack.html('Remaining characters: ' + remaining);
            }
        }
     $('#MainContent_TextBox585').keyup(function () { ValidateTextBoxLen($('.validatable_textbox')); });

    });

更改在这里：

$('#MainContent_TextBox585').keyup(function () { ValidateTextBoxLen($('.validatable_textbox')); });