からkeyupイベントは、パフォーマンスの低下を働いている

Question

マイ例：

$(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>

私の問題：私はdiv要素の中に通常の速度でいくつかのテキスト（1文字以上）を入力すると、コードが正常に動作します。しかし、高速でテキストを入力しようとすると、<span>タグがdivに追加されませんでした。

どうすれば修正できますか？あなたはときに気管切開ユーザ入力、それがより効率的だ代わりにinputイベントを使用することができ

Answer 1

、以下の例をご確認ください：

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

、あるいはまたkeypressをT.J. Crowder comment'sと言う：

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

・ホープ、このことができます。

$(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>