Question

我正在尝试使用form和textarea创建博客评论span，向用户显示可以在文本区域中引入的剩余字符数。< / p>

所以我有这样的表格：

<form action="comment.php" method="POST" accept-charset="utf-8">
    <textarea name="comment" id="comment" rows="4" cols="56"></textarea>

    <input type="submit" value="Post" />
    <span id="comment-chars-left">512</span> characters left
</form>

然后我编写了以下jQuery代码：

$('#comment')
    .keydown(function(event) {
        $('#comment-chars-left').html('' + (512 - $textarea.val().length));
    });

问题是，当首先调用键入.keydown时，会打印剩余字符的数量，然后在textarea中显示键入的新字符。因此，剩余字符的数量没有正确的值，大一个单位。为了完成这项工作，应在插入新角色后调用.keydown。

如何解决此问题？

Answer 1

改为使用keyup()。

您还需要绑定一些其他事件。

使用bind('keyup paste drop')。

发布密钥时发生事件

keyup，paste如果有人在您的textarea中粘贴文字，drop如果有人在您{{1}中删除了一大块文字}}

jsFiddle

Answer 2

您可以使用$('#comment').keyup()：）

Answer 3

为什么不使用.keyup()？

$('#comment')
    .keyup(function(event) {
        $('#comment-chars-left').html('' + (512 - $textarea.val().length));
    });

Answer 4

尝试.keyup事件

Answer 5

使用keypress事件，当键生成一个字符时，而不是按下该键时，会发生这种情况。（例如，shift键会导致keydown事件但不会导致keypress事件，并且重复的键会导致每个字符发生keypress个事件，但只会发生keydown个事件。第一个。）

使用setTimeout方法启动一个计时器，该计时器将在处理完事件后运行代码：

$('#comment')
  .keypress(function() {
    window.setTimeout(function(){
      $('#comment-chars-left').html('' + (512 - $textarea.val().length));
    }, 0);
  });

在用户输入时实时显示HTML textarea中的字符数

5 个答案: