javascript 显示字符剩余更新与按钮按住

Javascript Display Characters Remaining Update With Button Hold

本文关键字：按钮 更新 字符 显示 余更新 javascript      更新时间：2023-09-26

我正在显示此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"按钮键入"nnnn

有人可以帮忙吗？

您只需要将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);
   });
 });

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

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