Автоматическая фокусировка на диалоге JavaScript в Safari?

Question

Правильно, я немного отредактировал этот пост после некоторых дальнейших тестов, которые я проводил, мой оригинальный пост ниже, однако, теперь это суть проблемы.

У меня есть 3 изображения на странице, при нажатии на них появляется диалоговое окно javascript window.confirm с просьбой подтвердить выбор. Однако из-за расположения изображений на странице диалоговое окно появляется над изображением, при попытке нажать кнопку «ОК» или «Отмена» ничего не происходит. Однако на самом деле происходит следующее подтверждение того, что поверх оригинала появляется другое подтверждение, и это продолжается. Однако, если я щелкну где-нибудь на кнопке, на которой нет изображения, то это сработает, но только после двойного щелчка.

Что я обнаружил, так это то, что при отображении диалогового окна оно не фокусируется автоматически, поэтому необходимо щелкнуть его, чтобы сфокусироваться, прежде чем снова нажать кнопку, чтобы закрыть диалоговое окно. Если при первом щелчке вы щелкаете по той части кнопки (или самого диалогового окна), за которой находится изображение, это изображение фактически щелкается, поскольку диалоговое окно не имеет фокуса. Тем не менее, если вы щелкнете в любом месте диалогового окна, за которым нет изображения (следовательно, фокусируясь на этом диалоговом окне), затем нажмите кнопку «ОК» или «Отмена», это сработает (даже там, где кнопка «ОК» или «Отмена» имеет изображение позади).

Так что мне нужно знать, есть ли способ автоматически фокусировать внимание на диалоговом окне при его открытии, предотвращая необходимость двойного щелчка? Или это просто ошибка в сафари, которую я должен найти для обхода.

-------- оригинальный пост ---------

У меня есть сайт с серией изображений и ссылок. При нажатии на изображение или ссылку отображается диалоговое окно window.confirm, спрашивающее пользователя, уверены ли они, что хотят выполнить действие.

В IE, Opera и Firefox это работает нормально.

Однако в Safari, когда я нажимаю кнопки «ОК» или «Отмена» в диалоговом окне, все, что находится на странице за кнопкой, фактически щелкается, а не кнопка в самом диалоговом окне. Диалог на самом деле говорит: «Вы уверены, что хотите проголосовать за xyz?», Где xyz основан на кликнувшем изображении или ссылке - когда я нажимаю кнопку «ОК» или «Отмена» в диалоговом окне, текст меняется на изображение / ссылку, которые находятся за этим «ОК» / «Отмена». кнопка.

Кто-нибудь видел эту ошибку и / или знает, как ее обойти?

UPDATE

Мне удалось немного его сузить, и я только что нашел, в чем проблема.

Я обнаружил, что если щелкнуть часть кнопки, на которой нет изображения (каждое изображение на самом деле является .NET ImageButton), то это сработает (хотя для этого требуется двойной щелчок). Если я щелкну часть кнопки с изображением позади нее, то откроется диалоговое окно предупреждения / подтверждения. Я добавил JQuery, в котором к каждому изображению добавляется событие щелчка, при щелчке оно скрывает изображение, затем отображает диалоговое окно, и диалоговое окно работает нормально.

Очевидно, что это не то, что мне нужно (на самом деле я не хочу, чтобы изображения исчезали), но это сузило его. Есть идеи, как это можно решить?

Еще одно обновление: я думаю, что на самом деле диалоговое окно предупреждения / подтверждения изначально не фокусируется, поэтому необходимо дважды щелкнуть мышью. Если я щелкну диалоговое окно (в любом месте, где изображение не находится позади), затем нажмите кнопку ОК (даже если за кнопкой находится изображение), и оно заработает. Итак, как мне заставить его автоматически сфокусироваться на диалоге после его открытия?

Answer 1

Я также столкнулся с этой проблемой, и вот как я ее решаю.

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

это довольно неудобное решение, но, по крайней мере, оно работает без значительных изменений, а также отлично работает в других браузерах.

Answer 2

Я как раз собирался сообщить об ошибке самостоятельно. У меня есть диалог подтверждения, чтобы запросить да или нет, чтобы удалить изображение из галереи. Эта ситуация выполняется во всплывающем окне. Независимо от того, нажимаю ли я OK для true или отмену для false, действие закрывает всплывающее окно и на этом все! Как уже упоминалось в предыдущем посте, если я выйду за пределы диалога и буду избегать любых ссылок, изображений или вещей, которые вызывают javascript и щелкаю где-то еще во всплывающем окне, возвращаюсь к диалогу, кнопки диалога работают. Это похоже на проблему фокуса. Диалог также кажется прозрачным, щелчок в любом месте приведет к появлению в любом месте под ним, как в моем случае, у меня есть изображения, которые при нажатии вызывают функцию.

Answer 3

Я сам наткнулся на это и пока не нашел ответа, но думал, что опубликую вещи, которые наблюдал, чтобы увидеть, одинаковы ли они для вас.

Вы говорите, что должны щелкнуть диалоговое окно, чтобы выделить его, прежде чем оно заработает. Я обнаружил, что вам просто нужно щелкнуть в любом месте Safari, даже не в диалоговом окне, и диалоговое окно начнет работать. Кроме того, кажется, что это не совсем проблема фокуса, так как управление диалогом по-прежнему работает с клавиатуры, пробел, чтобы выбрать OK, или вкладка и пробел, чтобы выбрать Отмена. Вы можете это подтвердить?

Какую версию Safari вы используете и какую версию Windows? Я использую Windows 7, Safari 5.0.3 (7533.19.4). Я попытаюсь проверить это на Mac, или вы можете, если вам удобно.

В Windows 7 кнопки выделяются при наведении курсора мыши, даже если они находятся в окне без фокуса. Эта проблема в Safari вызывает некоторые интересные реакции на кнопки. Когда диалоговое окно впервые всплывает, кнопки на странице все еще подсвечиваются при наведении курсора, но кнопки в диалоговом окне этого не делают. После нажатия в Safari кнопка «Отмена» в диалоговом окне подсвечивается при наведении курсора мыши, но кнопки на странице не отображаются, а кнопка «ОК» в диалоговом окне - нет. Однако, если вместо щелчка в Safari, какое-то другое приложение получает фокус, щелкнув обе кнопки в выделении диалогового окна, в то время как кнопки на странице этого не делают. Еще более противоречивое поведение, когда Safari восстанавливает фокус. Если он восстановил фокус по щелчку в диалоговом окне, обе кнопки в диалоговом окне подсвечиваются. Если фокус был восстановлен щелчком, а не в диалоговом окне, выделяется только кнопка «Отмена», а не кнопка «ОК».

Это было все, если фокус был передан с помощью мыши. Когда фокус переносится с помощью Alt-Tabbing, происходит другое поведение. В том случае, когда другому приложению сначала дается фокус, кнопки остаются такими же, какими они были с кнопками подсветки страницы, а кнопки в диалоговом окне - нет. Если в Safari снова есть Alt-Tabbed, значит, ничего не произошло, и вам все равно нужно нажать, чтобы диалоговое окно заработало. Если в Safari щелкнуть в любом месте, в диалоговом окне или нет, обе кнопки в диалоговом окне подсвечиваются, а кнопки на странице - нет.

Непоследовательное поведение кнопок можно найти в других местах в Safari. Элементы меню «Печать» и «Сохранить» вызывают диалоговые окна Windows по умолчанию, поэтому кнопки в них работают в соответствии с Windows. Диалоги Safari, такие как подтверждение Javascript, Настройка панели инструментов ... и Сообщить об ошибках в Apple ..., имеют кнопки разных размеров. Кроме того, кнопка «Готово» на панели инструментов настройки является кнопкой по умолчанию, но она не будет выделяться до тех пор, пока не будет нажат диалог. Кнопка «Отправить» в «Отчетах об ошибках» является кнопкой по умолчанию и будет выделяться при наведении курсора мыши, не нажимая на диалоговое окно, но не отображает синее кольцо, указывающее, что это значение по умолчанию, пока оно не было наведено.

Все это, конечно, то, что я испытал, так что это может быть не так для вас. На данный момент, потому что поведение настолько противоречиво, я думаю, что это ошибка в Safari, но я буду исследовать дальше.

Answer 4

По моему опыту, на самом деле происходит щелчок мыши по диалоговому окну, как будто его там нет вообще. Если за этим стоит кнопка, запускающая диалоговое окно, вы застреваете в цикле одного диалога за другим. Я знаю, что в моем коде ничего нет, поскольку такой же эффект происходит на других веб-сайтах. Это только ошибка в Windows, а не в Mac. Я использую Safari 5.0.3 в Windows XP.