Automatically focusing on javascript dialog in safari?_问答_开发者

Right, I've edited this post a bit following some further tests I've been doing, my original post is below, however, this is now the crux of the issue.

I have 3 images on a page, when one is clicked a javascript window.confirm dialog is displayed asking the user to confirm their selection. However, due to the positioning of the images on the page, the dialog appears over an image, when trying to click OK or Cancel, nothing appears to happen. However, what actually does happen is that another confirmation appears over the top of the original one, and this continues. However, if I click somewhere on the button that doesn't have the image behind, then it works, but only after double clicking.

What I've found is that when a dialog is displayed, it doesn't automatically get focus, so you have to click it to focus, before clicking the button again to close the dialog. If on the first click you click the part of a button (or the dialog itself) that has an image behind, that image is actually clicked as the dialog doesn't have focus. However, if you click anywhere in the dialog which doesn't have an image behind (therefore focusing on the dialog), then click OK or Cancel, it works (even where the OK or Cancel button has an image behind).

So what I need to know is, is there a way of automatically focussing on the dialog when it opens, therefore preventing the need for double-clicking? Or is this just a safari bug that I'll have to find another way around.

--------original post---------

I have a website with a series of images and links. When an image or link is clicked, a window.confirm dialog is displayed asking the user if they are sure they want to carry out the action.

In IE, Opera and Firefox this works fine.

However, in Safari, when I click the OK or Cancel buttons on the dialog, whatever is on the page behind the button is actually clicked, rather than the button in the dialog itself. The dialog actually says "Are you sure you want to vote for xyz", where xyz is based on the clicked image or link - when I click OK or c开发者_如何学编程ancel in the dialog the text changes to whatever image/link is behind that OK/Cancel button.

Has anyone seen this bug, and/or knows a way around it?

UPDATE

I've been managing to narrow it down a bit, and have just found where the issue seems to lie.

I found that if I clicked the part of a button that didn't have an image behind it (each image is actually a .NET ImageButton), then it would work (though it requires a double-click). If I click part of a button that does have an image behind it then it would open up a further alert/confirm dialog. I've put some JQuery in which adds a click event to each image, on clicking it hides the image, then displays the dialog, and the dialog works fine.

Obviously this isn't what I require (don't really want the images disappearing), but it has narrowed it down. Any ideas how this can be solved?

Another update: I think that actually the alert/confirm dialog isn't initially getting focus, hence the need to double click. If I click the dialog (anywhere where an image isn't behind) then click OK (even if there is an image behind that button) then it works. So, how do I get it to focus automatically on the dialog once its opened?

I just ran into this myself and haven't found an answer yet, but I thought I would post things I have observed to see if they're the same for you.

You say you have to click the dialog to give it focus before it will work. I have found that you simply have to click anywhere in Safari, even not on the dialog, and the dialog will start working. Furthermore, it doesn't seem to be exactly a focus issue as keyboard control of the dialog still works, Space to select OK, or Tab and Space to select Cancel. Can you confirm this?

What version of Safari are you running and what version of Windows? I am running Windows 7, Safari 5.0.3 (7533.19.4). I will try to test this on Mac as well or you could if it's convenient for you.

In Windows 7 buttons highlight on mouse over even if they are in a window without focus. This issue in Safari causes some interesting reactions in the buttons. When the dialog first pops up buttons on the page still highlight on mouse over, but the buttons in the dialog do not. After a click in Safari the Cancel button in the dialog highlights on mouse over, but the buttons on the page do not and the OK button in the dialog does not. However, if, instead of clicking in Safari, some other application is given focus by a click both buttons in the dialog highlight while the buttons on the page do not. There is even more inconsistent behaviour when Safari regains focus. If it regained focus by a click in the dialog both the buttons in the dialog highlight. If it regained focus by a click not in the dialog only the Cancel button highlights, not the OK button.

That was all if focus was transferred with the mouse. When focus is transferred by Alt-Tabbing there is different bahaviour. In that case when a different application is first given focus the buttons remain as they were with the buttons on the page highlighting and the buttons in the dialog not. If Safari is Alt-Tabbed back to it's as if nothing has happened and you still have to click to get the dialog working. If Safari is clicked on anywhere, in the dialog or not, both buttons in the dialog highlight and the buttons on the page do not.

Inconsistent behaviour of buttons can be found elsewhere in Safari. The Print and Save menu items bring up Windows default dialogs so buttons in those behave consistently with Windows. Safari specific dialogs, like the Javascript confirm, Customize Toolbar..., and Report Bugs to Apple... have different sized buttons. Furthermore, the Done button in Customize Toolbar is the default button, but will not highlight until the dialog has been clicked on. The Submit button in Report Bugs is the default button and will highlight on mouse over without clicking on the dialog, but does not show the blue ring to indicate it is default until it has been moused over.

All of this is, of course, what I experienced so it may not be the same for you. At this point, because the behaviour is so inconsistent I think it is a bug in Safari, but I will investigate further.

I was just about to report a bug myself. I have a confirm dialogue come up to request yes or no to delete an image from a gallery. This situation is performed in a popup window. Whether I click OK for true or cancel for false, the action closes the popup and thats it! As mentioned from a previous post, if I go outside the dialogue and keep clear of any links, images or things that call javascript and click somewhere else in the popup window, go back to the dialogue, the dialogue buttons work. It seems like a focus issue. The dialogue also seems sort of transparent, clicking anywhere on it will effect anywhere underneath it as my case, I have images that when clicked on call a function.

I also encountered this problem, and this is how I resolve it.

setTimeout(function() {
    var confirm = confirm("Are you sure you want to send it?");
    if(confirm) {
        // do stuff here
    } else {
        // do stuff here
    }
},10);

this is quite inconvenient solution but at least it works without huge alteration and also works fine in other browsers too.

From my experience what is actually happening is the mouse clicks go thru the dialog box as if it is not there at all. If what is behind it happens to be the button that launches the dialog box you get stuck in a loop of one dialog after another coming up. I know this is nothing in my code since the same effect happens on other web sites. This is only a bug on Windows not on a Mac. I am using Safari 5.0.3 on Windows XP.