Question

我使用Jquery在按钮单击上动态添加文本字段。我需要在每个添加的文本字段下面添加一个字符计数器，因此当用户输入时，他们可以看到剩下多少个字符。

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

这个小提琴说明了问题：https://jsfiddle.net/7com4vqz/1/

HTML：

<input type='button' value='+' id='addUpdate'>
<input type='button' value='-' id='removeUpdate'>

<div id='TextBoxesGroup'>        
    <div id="TextBoxDiv1">
        <h4>Update #1</h4>
        <textarea id="txtUpdates1" name="txtUpdates1" cols="130" rows="5" maxlength="500" class="form-control" placeholder="500 characters max"></textarea>
        <div id="updateCounter1"></div>
    </div>
</div>

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

Answer 1

尝试this

我只需要在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');
    }
});

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

1 个答案: