关键事件正在运行缓慢的表现 [英] keyup event is working slow performance

问题描述

我的例子：

$（document）.on（'keyup '，'[contenteditable = true]'，function（e）{let _this = $（this），text = _this.text（）; if（text.length === 1）{let span = $（'< （文本）; _this.html（span）;} console.log（_this.html（））;}）;

  [contenteditable = true] {border：1px solid #ccc;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery。 min.js>< / script>< div contenteditable =true>< / div>  
 
 
 
我的问题：如果我用正常的速度输入一些文本（超过1个字符）进入div，代码工作正常。但是，当我尝试快速输入文本时，没有
< span> 标签被添加到div中。
 
 
 <我可以使用输入来解决这个问题。
  事件，而不是在你处理用户输入时效率更高，查看下面的例子： 
 
 
  $（document）.on（'input'， '[contenteditable = true]'，函数（e）{
 //您的逻辑
}）; 
  
或 keypress  as  < a href =https://stackoverflow.com/questions/42314838/keyup-event-is-working-slow-performance/42314854#comment-71783478> TJ Crowder comment's  说： 
 
 
  $（document）.on（'keypress'，'[contenteditable = true]'，函数（e）{
 //你的逻辑
}）; 
  
希望这有助于您。 
 
 
 
 
 
  [contenteditable = true] {border：1px solid #ccc;}  
 
 < ; script src =https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js>< / script>< div contenteditable =true>< / div>  

My example:

$(document).on('keyup', '[contenteditable=true]', function (e) {
        
    let _this = $(this), text = _this.text();

    if (text.length === 1) {
        let span = $('<span>').text(text);
        _this.html(span);
    }

    console.log(_this.html());

});

[contenteditable=true] {
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div contenteditable="true"></div>

My problem: If I type some text (more than 1 character) with normal speed into the div, code works fine. But, when I try to type text with fast speed, no <span> tag was appended to the div.

How can I fix that?

解决方案

You could use input event instead it's more efficient when you trach user inputs, check example below :

$(document).on('input', '[contenteditable=true]', function (e) {
    //Your logic
});

Or also keypress as T.J. Crowder comment's says :

$(document).on('keypress', '[contenteditable=true]', function (e) {
    //Your logic
});

Hope this helps.

$(document).on('input', '[contenteditable=true]', function (e) {
        
    let _this = $(this), text = _this.text();

    if (text.length === 1) {
        let span = $('<span>').text(text);
        _this.html(span);
    }

    console.log(_this.html());

});

[contenteditable=true] {
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div contenteditable="true"></div>

这篇关于关键事件正在运行缓慢的表现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！