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”按钮键入“nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

有人可以帮忙。

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显示字符剩余更新与按钮保持

2 个答案: