Alert () on change event cannot be dismissed in Firefox

Dialog box alert()

in change event with jQuery cannot be closed (I click Ok but nothing happens *) in latest Firefox. In Internet Explorer, the warning appears once and can be closed.

It seems that clicking on the warning (re) triggers a change event on the input field in Firefox, but I'm not sure as the console log message is not showing.

$('input#i').on('keyup change', function(e) {
    console.log('alert ...');
    alert(1); // can't be closed on Firefox
    return false;


Full JavaScript fiddle:

Tested on Firefox 52.0.1 (64-bit) on Win 7 and IE 11 on Win 7.

* = At ​​least I cannot tell if something is happening. The popup remains in the same position. the button can be clicked, the style will change. I have tested to dismiss the warning with the keyboard (Enter) and click the OK button. Both cases did not remove the warning box.


Al.G. found a solution and explanation in this answer on StackOverflow . In short: keydown

instead of keyup

. Since this still does not explain the behavior when using the mouse, I just ran some additional tests and noticed that the warnings look different:

In my bad usecase where the popup cannot be removed it looks like this:

bad alert

When using the fix by Al.G or removing one of the events that the code is listening to, it looks like this:

enter image description here

This could be a hint that the warning is not completely crossed out yet and another popup is showing, or something is blocking rendering.


source to share

3 answers

By placing my comment as an answer:

The button is Ok

not actually disabled. You can click on it and the prompt closes, but:

  • You close the alert, so key focus returns to the previous element that held it, i.e. to the input element.

  • Immediately after that, you release the key.
    Since the input element has focus, you fire an event on it keyup


  • The same event function keyup

    that you hooked up gets executed again. Go to step 1 :)

The way to work around this issue is to use an event that won't fire after the key is released. This is where you need keydown


  • As for why console.log

    it isn't printed twice:
    Probably the browser just doesn't add a newline to the console, but shows a small number next to your message with the number of times the message was sent.

  • To keep track of what types of events were triggered: console.log('alert ...' + e.type + Math.random());

    I added a random number so that your browser doesn't squash your messages into one.

  • Why the letters do not appear in the input field using keydown

    : because you preventDefault()

    , and return false;

    in the event. Any additional event triggers are ignored.



It seems to be some kind of bug in Firefox ...

I think you can work around the problem with this code ...

var popupOpen = false;
$('input#i').on('keyup change', function(ev) {
    if (popupOpen == false) {
        popupOpen = true;
        console.log('alert ...');
        alert(1); // can't be closed on Firefox
        popupOpen = false;
    return false;




So in FF44.0.2 it works as given. However, you might get unexpected results because you are running twice. The lock is disabled, triggering a warning. Displaying alerts removes focus from the input, which then fires a change event on the same element, re-displaying the alert. I only get twice for each keyboard, not for an infinite loop.



All Articles