Why does the input event fire twice in Firefox on Android?

• 0
  I'm trying to filter out the unavailable characters and convert the letters to uppercase.
  
  If you do it like this, then the input event will be called twice
  

  var input = document.getElementById("a");
  input.addEventListener("input", () => {
    input.value = input.value.toUpperCase().replace(/[^A-Z]/gi, '');
  });

  
  But at the same time, if you remove any of the two transformations, then there will be no problem.
  
  

  var input = document.getElementById("a");
  input.addEventListener("input", () => {
    input.value = input.value.toUpperCase();
     // или
    input.value = input.value.replace(/[^A-Z]/gi, '')
  });

  
  
  The problem is observed only in firefox on the phone, in chrome and also on the tablet / computer, the problem is absent (perhaps I have not tried all browsers).
  You can test it here (version with problem) and here (version without problem)
  
  How can you get around this?
  
  Added: strange, but on another phone I can not reproduce the problem :( And on mine it plays stably. Firefox is the latest version on both devices

  JavaScript Atticus Merritt, Aug 6, 2020

---

0 Answers