如何使用jquery keyup方法设置时间?

jgwigjjp  于 2023-03-17  发布在  jQuery
关注(0)|答案(3)|浏览(120)

我想用jquery keyup方法添加时间。下面是我的代码:

$("#textbox").keyup(function () {
    var text = $('#textbox').val()
    
    $("#output").val(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
   <body>
      <textarea id="textbox" placeholder = "..." rows="5"></textarea>
      <br><br>
      <input type="text" id="output"/>
   </body>
</html>

实际上,我想在打字的时候,每5秒调用一次keyup函数,比如:我正在键入The quick brown fox jumps over the lazy dog。所需输出:T f t d像这样。第一个字母是t。keyup函数在5节后被调用。我也在打字。5秒后第二个单词是f从'fox'。继续这样...
有办法吗?

7nbnzgx9

7nbnzgx91#

一种方法是每隔5秒绑定一个one()事件处理器。注意,您需要使用keypress而不是keyup来区分输入字符的大小写。尝试以下操作:

addKeyup();

function addKeyup() {
  $("#textbox").one('keypress', function(e) {
    $("#output").val((i, v) => `${v} ${String.fromCharCode(e.which)}`);
    setTimeout(addKeyup, 5000);
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="textbox" placeholder="..." rows="5"></textarea><br /><br />
<input type="text" id="output" />
bf1o4zei

bf1o4zei2#

let lastKeyTime = 0;
$("#textbox").keyup(function () {
    if (lastKeyTime < Date.now() - 5000) {
        const outputElement = $("#output");
        outputElement.val(outputElement.val() + this.value.slice(this.value.length - 1));
        lastKeyTime = Date.now();
    }
});

但是要注意,当使用keyup而不是keydown并且你部分同时按下两个键时(快速打字时一直会发生什么),它会将最后按下的键添加到你的列表中。

hmae6n7t

hmae6n7t3#

var typingTimer; 
  
$('#textbox').keyup(function(){
  clearTimeout(typingTimer);
  typingTimer = setTimeout(function(){
    $('#output').val($('#textbox').val());
  }, 5000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="textbox" placeholder = "..." rows="5"></textarea>
      <br><br>
      <input type="text" id="output"/>
<script>
  
</script>

相关问题