Add "change" event for the first event:
document.querySelector('input').addEventListener('change', function(event){ console.log(event); });
Or add "change" event for document.body:
document.body.addEventListener('change', function(event){ console.log(event); });
Select Predefined mask:
for example, Set to (999) 999-9999
Fill Masked Input field correctly: (123) 456-7890
Now if you put cursor, for example, between symbols 7 and 8, then press Delete, then press 3: (123) 456-7390,
you can see only one event in console - Chrome 54.0.2840.99
you can see two events in console - Firefox 50.0
But if you select 8 (only one symbol) in "(123) 456-7890"
and press 3,
you can see two events - Firefox 50.0 and Chrome 54.0.2840.99
I tested it in Chrome 54.0.2840.99 and Firefox 50.0. You can use other versions.
How to repeat:
document.querySelector('input').addEventListener('change', function(event){ console.log(event); });Or add "change" event for document.body:document.body.addEventListener('change', function(event){ console.log(event); });