keyup事件正在緩慢性能

我的例子：keyup事件正在緩慢性能

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

我的問題：如果我輸入一些文字（超過1個字符）與正常速度進格，代碼工作正常。但是，當我嘗試以高速輸入文本時，沒有<span>標籤被添加到div。

我該如何解決這個問題？

來源

2017-02-18 Tân Nguyễn

這不是*速度*，那就是當你要快，你必須多張keydowns你的第一個KEYUP，這意味着第一KEYUP看到一個以上的字符在之前的事實DIV。如果你使用'keypress'，你會得到想要的結果（或者'input'，就像Zakaria指出的那樣 - 'input'也會粘貼在paste上，這可能是你想要的也可能不是）。 –

@ T.J.Crowder謝謝！我會記住它。 –

你可以使用input事件，而不是它的效率更高，當你崔西用戶輸入，查看下面的例子：

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

來源

2017-02-18 11:58:43

keyup事件正在緩慢性能

回答

相關問題