Изменение Фокуса JavaScript в onClick событии?

Примечание: Для возможного решения нужна только работа в Firefox 3.0, мое приложение не предоставляет доступ от IE! =)

У меня есть ссылка, которая при нажатии отобразит лайтбокс пользователю:

<a href="#" onclick="show_lightbox();return false;">show lightbox</a>

Моя проблема состоит в том, что, когда лайтбокс отображен, фокус остается на ссылке. Таким образом, если пользователь нажимает или вниз ключи, они заканчивают тем, что прокрутили основной документ, не лайтбокс, который отображен!

Я попытался установить фокус на элемент лайтбокса с помощью кода как это

function focus_on_lightbox() {
  document.getElementById('lightbox_content').focus(); 
} 

Это хорошо работает, если я ввожу его в консоли поджигателя, но не буду работать, если я включаю его в конце onclick отрывка. Появляется, как будто я не могу изменить фокус далеко от ссылки из кода, выполненного в onclick событии?


- Обновите 1, я попробовал что-то вроде этого прежде

<a href="#" onclick="show_lightbox();focus_on_lightbox();return false;">show lightbox</a>

и у меня есть модифицированная функция для добавления некоторой отладочной информации, следующим образом

function focus_on_lightbox() {
  console.log('hihi');
  console.log(document.activeElement);
  document.getElementById('lightbox_content').focus(); 
  console.log(document.activeElement);
}

Вывод следующие

hihi
<a onclick="closePopup();lightbox('apartment_detail','11619');focus_on_lightbox();return false;" href="#">
<a onclick="closePopup();lightbox('apartment_detail','11619');focus_on_lightbox();return false;" href="#">

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

Не уверенный, если это имеет значение, но я использую ajax для загрузки лайтбокса, следующим образом

  new Ajax.Updater(lightbox_content_id, url, {asynchronous:true, evalScripts:true, onLoading:show_lightbox_loading(), onComplete:focus_on_lightbox() }); 

Я пытался установить фокус после завершенного ajax, но также и, никакая удача.

Что я пропускаю?


Я пытался заставить решение работать, который был предложен ниже путем попытки установить фокус, наблюдения, успешно выполнился ли я путем проверки document.activeElement, в противном случае ожидайте 100 миллисекунд и попробуйте еще раз. Если я буду использовать следующую функцию, то она будет работать

function focus_on_lightbox() {
  var seconds_waited = 0
  pause(100);
  var current_focus = document.activeElement
  while (document.getElementById(lightbox_content_id) != current_focus && seconds_waited < 2000)
  {
    document.getElementById(lightbox_content_id).focus(); 
    console.log(document.activeElement);
    pause(100);
    current_focus = document.activeElement
    seconds_waited += 100;
  }
}

Однако, если я удаляю поджигателя, отлаживающего statment console.log, функция прекращает работать!! Я понятия не имею, почему это имело бы место?? То, почему был бы, производя переменную к консольному погодному фокусу влияния поджигателя, перемещено в элемент или нет? Оператор console.log влияет на фокус? возможно, путем обеспечения фокуса к консольному окну отладки?

6
задан Brian Tompsett - 汤莱恩 21 July 2019 в 18:16
поделиться

4 ответа

Вот функция, которая наконец сработала

function focus_on_lightbox(seconds) {
  var seconds_waited
  seconds_waited = seconds
  document.getElementById(lightbox_content_id).focus(); 
  seconds_waited += 100;

  if (document.getElementById(lightbox_content_id) != document.activeElement && seconds_waited < 2000)
    setTimeout("focus_on_lightbox(" + seconds_waited + ");", 100);
  {
  }
}

Так почему же console.log, похоже, повлияла на установку фокуса? Раньше я использовал эту функцию для паузы между попытками изменения фокуса.

function pause(milliseconds) {
    var dt = new Date();
    while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}

Это заставляет javascript постоянно что-то делать, и я думаю, что это не давало документу времени на рендеринг или обновление или что-то в этом роде. Кажется, что console.log снял эту блокировку и дал странице возможность сменить фокус.

Когда я изменил подходы к использованию тайм-аута для паузы между попытками, console.log больше не нужен!

4
ответ дан 10 December 2019 в 02:52
поделиться

Я думаю, ваша проблема заключается в вызове метода фокуса после возврата false. ваш код должен быть таким:

<a href="#" 
    onclick="show_lightbox();focus_on_lightbox();return false;">
    show lightbox
</a>
4
ответ дан 10 December 2019 в 02:52
поделиться

По моему опыту, проблемы с фокусом иногда могут быть связаны со временем (например, focus () выполняется до того, как элемент будет полностью готов для фокусировки). Я предполагаю, что разметка лайтбокса создается динамически при вызове функции show_lightbox? В этом случае вы можете попробовать добавить небольшую задержку, прежде чем пытаться сфокусироваться, чтобы увидеть, проблема ли в этом, например:

setTimeout("focus_on_lightbox();", 10);
1
ответ дан 10 December 2019 в 02:52
поделиться

Сделайте сам элемент фокусом. В событии загрузки элемента установите тайм-аут в несколько мс и затем вызовите this.focus ();

Или попробуйте jQuery.

0
ответ дан 10 December 2019 в 02:52
поделиться
Другие вопросы по тегам:

Похожие вопросы: