更改輸入的輸入值，而不影響更改監聽器？

Question

我有一個文本輸入。它有一個change和一個input偵聽器。在input監聽器中，我刪除輸入的值，如果它是「刪除」。 change監聽器只是提醒「已更改」。

當前的行爲：

沒有 「改變」。當我輸入「delete」並停止編輯時會發出警報，因爲比較基準也會改變。

期望的行爲： 「更改」

我想看到的根據編輯開始時的值提醒，忽略修改過程中所做的所有程序更改。

這樣做的最簡單方法是什麼？

Playgorund：

1. 點擊輸入。
2. 刪除內容。
3. 鍵入「刪除」。
4. 查看文本如何刪除。
5. 點擊其他地方。
6. 看看「改變」。警報顯示爲而不是。

var input = document.querySelector('input'); 
 

 
input.addEventListener('change', function() { 
 

 
    alert('Changed.'); 
 

 
}); 
 

 
input.addEventListener('input', function() { 
 

 
    input.value = input.value.replace(/^delete$/, ''); 
 

 
});

<input value="example" />

Answer 1

我目前的解決方案是增加我的初始值存儲在每個focus事件的屬性，並在blur事件的時間比較它的當前值。

var input = document.querySelector('input'); 
 

 
input.addEventListener('focus', function() { 
 

 
    this.setAttribute('data-value-on-focus', this.value); 
 

 
}); 
 

 
input.addEventListener('blur', function() { 
 

 
    if (this.getAttribute('data-value-on-focus') !== this.value) alert('Changed.'); 
 

 
}); 
 

 
input.addEventListener('input', function() { 
 

 
    this.value = this.value.replace(/^delete$/, ''); 
 

 
});

<input value="example" />