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

jgwigjjp 于 2023-03-17 发布在 jQuery

关注(0)|答案(3)|浏览(116)

我想用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'。继续这样...
有办法吗？

jquery

来源：https://stackoverflow.com/questions/62149594/how-to-set-time-with-jquery-keyup-method

3条答案

按热度按时间

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" />

赞(0）回复(0）举报 2023-03-17

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并且你部分同时按下两个键时（快速打字时一直会发生什么），它会将最后按下的键添加到你的列表中。

赞(0）回复(0）举报 2023-03-17

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>

赞(0）回复(0）举报 2023-03-17

我来回答

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

3条答案

相关问题

热门标签

最新问答