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

因此，解决问题的方法非常简单，只需在页面加载后将其称为函数即可。

    function getcountonstart(){

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

               var remaining = $(".message").val().length

               $(".message").next().text(remaining + '/' + maxLength)

       }

       //Call the function

       getcountonstart();

编辑：完整的脚本代码！

 <script>

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

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

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

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

   })

   function getcountonstart(){

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

        var remaining = $(".message").val().length

        $(".message").next().text(remaining + '/' + maxLength)

   }

   getcountonstart();

</script>