0
293
Visualizaçõesalert() in on change event can not be dismissed on Firefox
An alert() dialog in an on change event with jQuery can't be closed (I click "Ok" but nothing happens*) on the latest Firefox. On Internet Explorer the alert shows up one time and can be closed.
It seems that clicking the alert (re)triggers a change event in the input field on Firefox but I'm not sure, since the console log message does not show up.
$('input#i').on('keyup change', function(e) {
e.preventDefault();
console.log('alert ...');
alert(1); // can't be closed on Firefox
return false;
});
Full JavaScript Fiddle: https://jsfiddle.net/powtac/w1md0bdd/
Tested on Firefox 52.0.1 (64-Bit) on Win 7 and IE 11 on Win 7.
* = At least I can not tell if something happens. The popup stays at the same position. the button can be clicked, it's style changes. I tested to dismiss the alert with keyboard (Enter) and mouse clicking the "Ok". Both cases did not remove the alert window.
Update:
Al.G. in this answer https://stackoverflow.com/a/43052301/22470 found a solution and explanation. In short: keydown instead keyup. Since this still does not explain the behavior when using mouse only I did some further tests and noticed that the alerts look different:
In my bad usecase where the popup can not be removed it looks like:
When using the fix by Al.G, or removing one of the events the code is listening to it looks like:
This might be a hint that the alert is not yet fully drawn and showing already another popup or something is blocking rendering.
3 Respostas
Responde à pergunta0
Putting my comment as an answer:
Actually the Ok button is not disabled. You can click it and the prompt does get closed, but:
You close the alert, so the key focus goes back to the previous element which held it - i.e. the input element.
Right after that, you release the key.
Since the input element has the focus, you trigger akeyupevent on it.That same
keyupevent function you attached gets executet again. Go to step 1 :)
A way to solve this is to use an event which won't be triggered after a key is release. What you need here is keydown.
As for why the
console.logis not printed twice:
it probably is, just the browser does not add a new line in the console but shows a tiny number next to your message with the number of times the message was sent.To track what types of events got triggered:
console.log('alert ...' + e.type + Math.random());
I added a random number so that your browser does not squash your messages into one.Why the letters do not appear in the input box when using
keydown: because youpreventDefault()andreturn false;on the event. Any further event triggers are ignored.
0
Seems to be some sort of Firefox bug...
I guess you can workaround the issue with this code...
var popupOpen = false;
$('input#i').on('keyup change', function(ev) {
ev.preventDefault();
if (popupOpen == false) {
popupOpen = true;
console.log('alert ...');
alert(1); // can't be closed on Firefox
popupOpen = false;
}
return false;
});
0
So, in FF44.0.2, it works as given. However, you may be getting some unexpected results because you're triggering twice. The keyup goes off, popping up the alert. The alert displaying removes focus from the input, which then triggers the change event on that same element, redisplaying the alert. I'm only getting it twice for each keyup, not an infinite loop.