Javascript keyup html在Firefox上有效，但在chrome上显示2

Question

问题是在Firefox上，以下代码有效。按以下方式工作：在输入文本之前显示计数，并且在输入文本时替换“ 0/350”。

在Chrome上，会显示0/350，但是在输入文字时，0/350会保留，但旁边会出现一个新的1/350。因此，最终，有一个空白0/350，旁边有一个空白，该计数应为空。

<div class="form-group">

   <%= form.label :description, class: "form-label"  %>

   <%= form.text_area :description, class: "form-control message" %>

   <span class="countdown float-right">0/350</span>

</div>

<script>

  $(".message").on("keyup", function () {

           var maxLength = $(this).attr("maxlength")

           var remaining = $(this).val().length

           $(this).next().text(remaining + '/' + maxLength)

   })

</script>

现在，如果我使用：

<span class="countdown float-right"></span>

注意，没有“ 0/350”，它在两种浏览器上都可以使用，但是只有输入文本后才会显示。也没有涉及CSS。

如何做到这一点，以便所有浏览器（例如在Firefox上的工作方式）也能在Chrome上显示该计数？

Answer 1

因此，解决问题的方法非常简单，只需在页面加载后将其称为函数即可。&nbsp; &nbsp; function getcountonstart(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var maxLength = $(".message").attr("maxlength")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var remaining = $(".message").val().length&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(".message").next().text(remaining + '/' + maxLength)&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;//Call the function&nbsp; &nbsp; &nbsp; &nbsp;getcountonstart();编辑：完整的脚本代码！&nbsp;<script>&nbsp; $(".message").on("keyup", function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var maxLength = $(this).attr("maxlength")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var remaining = $(this).val().length&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(this).next().text(remaining + '/' + maxLength)&nbsp; &nbsp;})&nbsp; &nbsp;function getcountonstart(){&nbsp; &nbsp; &nbsp; &nbsp; var maxLength = $(".message").attr("maxlength")&nbsp; &nbsp; &nbsp; &nbsp; var remaining = $(".message").val().length&nbsp; &nbsp; &nbsp; &nbsp; $(".message").next().text(remaining + '/' + maxLength)&nbsp; &nbsp;}&nbsp; &nbsp;getcountonstart();</script>