用于动态添加文本框的Jquery字符计数器

我正在使用Jquery在按钮单击上动态添加文本字段。我需要在添加的每个文本字段下面添加一个字符计数器，以便用户键入时可以看到剩余的字符数

现在，它所做的是显示div元素，但它使用相同的字符倒计时来处理每个文本字段，而不是对每个文本字段中的字符进行计数。我曾尝试使用.each和.map在updateCounter div标记中循环，但继续得到相同的结果。如何改进此功能以报告每个文本字段上的字符计数器？谢谢-

这把小提琴说明了问题：

HTML:

更新#1

JQuery：

//Dynamically added updates.
var counter = 2;
$("#addUpdate").click(function ()
{
    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
    newTextBoxDiv.after().html('<h4>Update #' + counter + '</h4>' +
    '<textarea cols="130" rows="5" maxlength="500" class="form-control" placeholder="500 characters max" name="txtUpdates"' + counter + '" id="txtUpdates' + counter + '" value="">');
    newTextBoxDiv.appendTo("#TextBoxesGroup");

    var newCounter = $(document.createElement('div')).attr("id", 'updateCounter' + counter);
    newCounter.after().html('<div name="updateCounter"' + counter + '" id="updateCounter' + counter + '" value="">');
    newCounter.appendTo("#TextBoxesGroup");

    counter++;
});

$("#removeUpdate").click(function ()
{
    if (counter == 1)
    {
        alert("No more textboxes to remove");
        return false;
    }

    counter--;

    $("#TextBoxDiv" + counter).remove();
});


$('body').on('keyup', '[id^=txtUpdates]', function ()
{
    var max = 500;
    var len = $(this).val().length;

    if (len >= max)
    {
        $('[id^=updateCounter]').text(' you have reached the limit');
    }

    else
    {
        var char = max - len;
        $('[id^=updateCounter]').text(char + ' characters left');
    }
});

//动态添加更新。
var计数器=2；
$（“#添加更新”）。单击（函数（）
{
var newTextBoxDiv=$（document.createElement（'div'））.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（'Update#'+counter+'+
'');
newCounter.appendTo（“#TextBoxesGroup”）；
计数器++；
});
$（“#删除更新”）。单击（函数（）
{
如果（计数器==1）
{
警报（“不再需要删除文本框”）；
返回false；
}
计数器--；
$（“#TextBoxDiv”+计数器）.remove（）；
});
$（'body'）。在（'keyup'，'id^=txtUpdates'，函数（）上
{
var max=500；
var len=$（this）.val（）.length；
如果（len>=max）
{
$（'[id^=updateCounter]'）。文本（'您已达到限制'）；
}
其他的
{
var char=最大长度；
$（'[id^=updateCounter]'）。文本（字符+左字符）；
}
});

试试看

我只需在您的

textarea

上添加一个属性，然后将jQuery更新为：

$('body').on('keyup', '[id^=txtUpdates]', function ()
{
    var max = 500;
    var len = $(this).val().length;

    if (len >= max)
    {
        $('#' + $(this).attr('data-id')).text(' you have reached the limit');
    }

    else
    {
        var char = max - len;
        $('#' + $(this).attr('data-id')).text(char + ' characters left');
    }
});

---

工作起来很有魅力！谢谢

$('body').on('keyup', '[id^=txtUpdates]', function ()
{
    var max = 500;
    var len = $(this).val().length;

    if (len >= max)
    {
        $('#' + $(this).attr('data-id')).text(' you have reached the limit');
    }

    else
    {
        var char = max - len;
        $('#' + $(this).attr('data-id')).text(char + ' characters left');
    }
});