Question

我正在尝试创建一个字符计数，当将任何文本放入注释区域文本框中时，该计数会不断更新。我希望totalTxt根据注释框中的字符数进行更新。任何帮助将不胜感激，谢谢！

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Coding Tasks</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
    $(document).ready(function(){
        $("#contact-form").validate();
      });
     $("#comment").keyup(function(){
       var count = $("#comment").val().length;
       $("#totalTxt").html(count);
     });
  </script>
    <style>
        .important {
          font-weight: bold;
          font-size: xx-large;
        }
        .set_colour {
          color: blue;
        }
        .test
        {
            width: 500px;
        }
        div
        {
            padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; margin-top: 3px; margin-right: 3px; margin-bottom: 3px; margin-left: 3px; border-top-color: navy; border-right-color: navy; border-bottom-color: navy; border-left-color: navy; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-style: solid; height:200px;
        }

    </style>

</head>
<body>
<div class="form-wrapper">
<p class="test">Test 6: Validating a FORM</p>

<form name="contact-form" action="" method="post" id="contact-form">
 <label>Name
 <input type="text" name="your_name" id="name" size="30" placeholder="must be more than 5 characters" minlength="5" required></label>

 <label>Email
 <input type="text" name="your_email" id="email" placeholder="Please enter a vaild email adress" required></label>

 <label>Phone
 +44<input type="text" name="your_phone" id="phone" placeholder="XX XXXX XXXX" minlength="10" maxlength="10" required></label>

 <label>Comment
 <textarea name="comments" cols="28" rows="5" id="comment"></textarea></label><span id="totalTxt">0</span>
 <input type="submit" name="submit" value="Summary" id="submitForm">
</form>
 </div>

</body>
</html>

Answer 1

您的代码段正在运行，只需在$.ready内使用它

$(document).ready(function(){
  $("#contact-form").validate();

  // used input event instead
  $("#comment").on('input', function(){
    var count = $("#comment").val().length;
    $("#totalTxt").html(count);
  });
});

Answer 2

替换此功能

$("#comment").keyup(function(){
       var count = $("#comment").val().length;
       $("#totalTxt").html(count);
     });

与此一起

$(document).on('keyup','[id^=comment]',function(){
        var len = $(this).val().length;
        $("#totalTxt").text(len);
});

应该可以

jQuery验证表单中文本区域中的字符

2 个答案: