jQuery keyup在'可編輯'div上延遲結果

Question

當用戶編輯並插入字母時，我有一個可編輯'div'，用於檢查值，以防用戶連續輸入'//'（正斜槓）我投擲錯誤..

但在keyup我這樣做，但我沒有得到錯誤拋出後，我鍵入第三個字母的例子（'///'）只有我得到錯誤拋出。如何連續兩次按下'/'？

這裏是我的代碼：

<div aria-label="test" contenteditable="true" style="">test</div> 

$('div').keyup(function(){ 
    var value = this.innerText.replace(/\/$/, '').replace(/\s+$/, '').toLowerCase().trim(); 

    if(value.match('//')){ 
     alert('this is invalid'); 
    } 
    console.log(value); 
}) 

Live Demo

Answer 1

該問題是由.replace()的調用引起的，其中您從字符串中刪除最後一個/。所以基本上，這是當你在/鍵入會發生什麼：

1. 用戶類型/和字符串text/將被轉換爲text
2. 然後，用戶類型/又和字符串轉換爲text/
3. 最後，當鍵入第三個/時，字符串將轉換爲text//並觸發alert()函數。

要解決此問題，您需要在修改連續斜槓之前檢查字符串。

$('div').keyup(function(){ 
    if (this.innerText.match(/\/\/$/)) { 
     alert('this is invalid'); 
    } 
    var value = this.innerText.replace(/\/$/, '').replace(/\s+$/, '').toLowerCase().trim(); 

    console.log(value); 
}); 

Demo

Answer 2

如果更換此行

var value = this.innerText.replace(/\/$/, '').replace(/\s+$/, '').toLowerCase().trim(); 

與

var value = this.innerText.trim(); 

，將工作