字符计数器在表中重复回显时不起作用 - character counter not functioning when echoed repeatedly in a table

character counter not functioning when echoed repeatedly in a table

本文关键字：不起作用计数器字符 | 更新日期: 2023-09-27

我试图在我的表内的多个文本区域使用下面的javascript字符计数器。问题是计数器只在表的第一行中起作用。带有textarea的后续行返回"剩余250个字符"，但不能按预期工作。我不知道如何分配每个字符计数器与唯一的id，所以它在所有文本区域的功能。如有任何帮助，不胜感激。

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>

这是一个非常简单的演示，所以我不认为需要太多的解释，除了这将针对使用的文本区域的下一个span。我看到你们已经有了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/>

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

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