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
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!