Changing input value on input, without affecting change listener?

Question

I have a text input. It has a change and an input listener. In the input listener, I delete the value of the input, if it is "delete". The change listener simply alerts "Changed.".

Current behaviour:

There is no "Changed." alert when I type "delete" and stop editing, because the comparison base is changed as well.

Desired behaviour:

I want to see the "Changed." alert based on the value at the start of the editing, ignoring all the programatic changes made during the modification.

What is the simplest way of doing this?

Playgorund:

1. Click the input.
2. Delete the content.
3. Type "delete".
4. See how the text is deleted.
5. Click somewhere else.
6. See how the "Changed." alert is not displayed.

 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

My current solution is to add an attribute that I store the initial value in on each focus event, and compare it to the current value at the time of the blur event.

 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" />