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");

为什么长度每次输出两次！？并有效地重置自己？我在textarea上使用了错误类型的事件吗？理想情况下，我希望计数器能够在用户输入时实时更新。

一些辅助信息，如果它有用......

我正在使用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

＆＃13;

$(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');
    });
});

＆＃13;

html { margin:11px }

＆＃13;

<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>

＆＃13;

键入时出现JQuery textarea字符计数问题

2 个答案: