Javascript 按住按钮显示剩余更新的字符

Question

我正在显示此text_area中剩余的字符数：

<%= f.text_area :review_text, id: 'review_text', :size => "50x20" %>

使用：

<span id="counter" data-maximum-length="<%= @maximum_length %>"><%= @maximum_length %></span> characters left

和 javascript:

$(document).ready(function() {
  var review_text = $("#review_text");
  var counter     = $("#counter");
  var max_length  = counter.data("maximum-length");

  review_text.keyup(function() {
      counter.text(max_length - $(this).val().length);
  });
});

虽然这有效，但它只会在用户停止按住键盘上的按钮时更新剩余的字符数，例如"n"，我想做的是在他们按住按钮的同时更新它。因此，如果他们通过按住 "n" 按钮键入 "nnnnnnnnnnnnnnnnnnnnnnnn"，则剩余的字符将在他们这样做时更新。

有人可以帮忙吗。

Answer 1

您只需要将 keyup 更改为 keydown:

$(document).ready(function() {
  var review_text = $("#review_text");
  var counter     = $("#counter");
  var max_length  = counter.data("maximum-length");

  review_text.keydown(function() {
    counter.text(max_length - $(this).val().length);
   });
 });

Answer 2

这会导致您正在寻找的功能

$review_text.on('input', function() {
  $counter.text(max_length - $(this).val().length);
});

Javascript 按住按钮显示剩余更新的字符

Javascript Display Characters Remaining Update With Button Hold

javascript

character