Question

我想知道当jQuery中textarea字段为空时如何将字符计数重置为零。我已经可以使用以下代码添加字符计数；

$(document).ready(function() {
    $('#content').on('keyup', function(event) {
        var text = this.value.length;
        if ($(this).val() != '') {
          $('#char-count-val').text(text);
        }else {
           $('#char-count-val').text('0');
        }
   });
});

不确定为什么它不会重置为零（0）。我尝试了solutions here，但仍然无法使用。请帮助

Answer 1

您的逻辑可以在键盘上正常工作，但是当您使用基于键的事件时，如果使用鼠标与该字段进行交互，则不会触发该事件，因此计数将不正确。

要解决此问题，并由于计数更新更快而改善了UX，请改用input事件：

$('#content').on('input', function(event) {
  var len = this.value.length;
  $('#char-count-val').text(len);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="content"></textarea>
<div id="char-count-val"></div>

Answer 2

您可以使用以下代码。我简化了一点。

var lengthInput = 0; // or lengthInput = '';
$(document).ready(function() {
    $('#content').on('keyup', function(event) {
        lengthInput = this.value.length;
        $('#char-count-val').text(lengthInput);
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="content"></textarea>
<br>
<br>
<p>Count : <span id="char-count-val" style="color:#fd0000;">0</span></p>

好的密码

jQuery中的textarea为空时如何将字符计数重置为零

2 个答案: