JQuery文本区域字符计数问题时键入

Question

我在form textarea上有一个字符计数函数的问题。网络上有很多解决方案，我遇到了一个非常方便的代码片段，如下所示，它将输出页面上指定区域的剩余字符数:

var maxLength = 1000;
jQuery('.your-enquiry').keyup(function() {
  var length = jQuery(this).val().length;
  var length = maxLength-length;
  console.log(length + "characters remaining");
  jQuery('#counter').text(length);
});

您可以看到我正在将长度variable输出到控制台窗口，以查看我的问题是什么。似乎一旦我释放一个键长度被分配一个值X，然后立即再次分配1000。

下面是我输出的一个例子:

995characters remaining (index):542 
1000characters remaining (index):542 

当我检查第542行代码时，它是:

console.log(length + "characters remaining");

为什么长度每次输出两次!?并有效地自我重置?我是否在文本区域上使用了错误的事件类型?理想情况下，我希望计数器在用户输入时实时更新。

如果对你有帮助的话，给你一些额外的信息…

我使用Contact Form 7 version 4.5.1来创建表单。我的HTML输出如下所示:

    <div>
<span class="wpcf7-form-control-wrap your-enquiry">
<textarea name="your-enquiry" cols="40" rows="10" maxlength="1000" minlength="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required your-enquiry" aria-required="true" aria-invalid="false"></textarea></span>
    <p id="counter">1000</p>
    </div>

注意:我对keyUp事件做了一些快速的研究，很明显每次Key被释放时它都会被触发。这是有意义的，但让我困惑的是，我的值被输出两次。

Answer 1

运行正常:

// HTML
<textarea class="your-enquiry" cols="40" rows="10" maxlength="1000" minlength="10"></textarea>
<p id="counter">1000</p></div>
// jQuery
var maxLength = 1000;
$('.your-enquiry').keyup(function() {
  var length = jQuery(this).val().length;
  var length = maxLength-length;
  console.log(length + "characters remaining");
  jQuery('#counter').text(length);
});

http://codepen.io/paulcredmond/pen/YpWRdY

Answer 2

$(document).ready(function() {
    var text_max = 1000;    
    $('.your-enquiry').keyup(function() {
        var text_length = $('.your-enquiry').val().length;
        var text_remaining = text_max - text_length;
        $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });
});

html { margin:11px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<textarea class="your-enquiry" rows="8" cols="30" maxlength="99" ></textarea>
<div id="textarea_feedback"></div>