Расширение Chrome - первая ссылка автоматически сфокусирована во всплывающем окне

Ответ 1

Самый простой способ (и javascript free!) - просто добавить tabindex="-1" к любому элементу, который вы не хотите получать автоматически.

Ответ 2

Возможно, автофокус был предназначен для удобства, но часто он оказывает плохую услугу. Поскольку я не вижу возможности остановить первопричину, я нашел несколько каруселей. Один использует JavaScript. Хром ставит автофокус после короткой задержки после отображения всплывающего окна. Можно сфокусировать его с помощью blur(), но слишком малое его фокусирование на мгновение мгновенно начнет мигать, и попытка слишком быстро расфокусироваться не сделает ничего. Таким образом, найти подходящее время для разворачивания непросто, и это решение пытается сделать это несколько раз в течение первой секунды после отображения всплывающего окна:

document.addEventListener("DOMContentLoaded", function () {
  var blurTimerId = window.setInterval(function() {
    if (document.activeElement != document.body) {
      document.activeElement.blur();
    }
  }, 200);
  window.setTimeout(function() {
    window.clearInterval(blurTimerId);
  }, 1000);
});

Другим чистым HTML-решением является добавление tabindex = "1" в тег body.

Ответ 3

Перемещение изначально сфокусированного элемента с атрибутом tabindex, вероятно, является лучшим способом, используя:

• tabindex="-1", как предложил Пола Ферре, чтобы предотвратить элемент из фокуса
• tabindex="1", как предложено link0ff, указать, какой элемент должен начинаться с фокуса

Если ваша ситуация более сложная, и вы хотите добавить некоторый javascript, я бы рекомендовал использовать решение link0ff, за исключением того, что вместо того, чтобы пытаться угадать, когда размываться с таймаутами, прислушайтесь к первому фокусу в событии:

function onInitialFocus(event) {
  // Any custom behavior your want to perform when the initial element is focused.

  // For example: If this is an anchor tag, remove focus
  if (event.target.tagName == "A") {
    event.target.blur();
  }

  // ALSO, remove this event listener after it is triggered,
  // so it not applied to subsequent focus events
  document.removeEventListener("focusin", onInitialFocus);
}

// NOTE: the "focusin" event bubbles up to the document,
// but the "focus" event does not.
document.addEventListener("focusin", onInitialFocus);

Я не считаю, что фокусное событие отменено, поэтому вы не можете просто подавить событие.

Ответ 4

Другая простая альтернатива (которая сохраняет "tabbability" ) заключается в том, чтобы просто добавить пустую ссылку (<a href="#"></a>) до вашей первой фактической ссылки. Он будет невидимо "улавливать" автофокус из Chrome, но все пользователи, желающие перебирать ссылки, все равно смогут это сделать нормально.

Единственным недостатком этого подхода является то, что он вводит вторую "мертвую вкладку" при циклировании; то есть пользователям придется нажать вкладку три раза, чтобы перейти от последней ссылки к первой, а не дважды.

Ответ 5

tabindex="-1" работал у меня. Я добавлял автофокус к входу, и он не работал, пока я не использовал этот атрибут tabindex="-1" для каждой ссылки перед входом.

Как ни странно.