Question

我正在尝试在我的表格中的多个textareas中使用下面的javascript字符计数器。问题是我的表的第一行中的计数器仅起作用。带有textareas的后续行回显“剩余250个字符”，但不能按预期运行。我不确定如何为每个字符计数器分配一个唯一的id，以便它在所有textareas中起作用。任何帮助将不胜感激。

PHP：

echo "</td><td>";
echo '<form action="peerflagreview.php?foorbar=' . $foobar . '" method="post" id="FlagPeerReview">
<A NAME="#peer' . $foobar . '"> (<a href="#peer' . $foobar . '" class="show_hide2">Report</a>)
<textarea class="PeerFlag" value="" name="PeerFlag" id="PeerFlag2"></textarea>
<input type="hidden" value="Post" name="submit" />
<span id="PeerFlag2Span">250 characters remaining</span>
<input type="submit" value="Submit"></form>';
echo "</td></tr>";

JAVASCRIPT：

<script type="text/javascript">
$("#PeerFlag2").on('change keydown paste input', function(){
      updateCounter('#PeerFlag2');
});
function updateCounter(theTextAreaID) {
    var remaining = 250 - jQuery(theTextAreaID).val().length;
    jQuery(theTextAreaID + 'Span').text(remaining + ' characters remaining.');
}

$('textarea').on('keydown', function(event) {
    if (event.keyCode == 13)
        if (!event.shiftKey) $('#PeerFlag').submit();
});

</script>

Answer 1

这是一个非常简单的演示，所以我没有看到需要太多解释，除此之外将针对正在使用的textarea的下一个范围。我看到你已经有了jQuery所以这个演示也将使用jQuery。

$(document).ready(function(){
    $(".UserInput").on('input', function(){
        $(this).next("span").html(250 - this.value.length + " characters remaining");
    }).trigger('input');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="UserInput"></textarea><span>this is filled automatically</span><br/>
<textarea class="UserInput"></textarea><span></span><br/>
<textarea class="UserInput"></textarea><span></span><br/>
<textarea class="UserInput"></textarea><span></span><br/>

如果您有任何疑问，请在下面留言，我会尽快给您回复。

我希望这有帮助。快乐的编码！

字符计数器在表中重复回显时不起作用

1 个答案: