15

如何停止我的 Google Chrome 扩展程序的默认操作以自动聚焦我的第一个链接popup.html？我知道我可能会用 JS 做一些迂回的 hack 或更改:focusCSS，但我认为这会抛弃我正在尝试做的其他事情，我更愿意阻止它的根本原因。

4

6 回答 6

16

最简单（并且免费的 javascript！）方法是简单地添加tabindex="-1"到您不想接收自动焦点的任何元素。

于 2013-12-07T21:52:07.460 回答
5

也许自动对焦是为了方便起见，但它往往会造成损害。由于我没有办法阻止根本原因，所以我找到了一些回旋处。一种是使用 JavaScript。Chrome 会在显示弹出窗口后短暂延迟后自动对焦。可以将其散焦，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 标记中。

于 2013-08-20T20:38:15.513 回答
5

使用属性争论最初聚焦的元素tabindex可能是最好的方法，使用：

  • tabindex="-1"，正如 Paul Ferret 所建议的那样，以防止元素获得焦点
  • 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's 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);

我不相信焦点事件是可取消的，所以你不能只是压制事件。

于 2015-08-10T01:02:15.937 回答
4

另一个简单的替代方法（保留“可标签性”）是<a href="#"></a>在您的第一个实际链接之前添加一个空链接 ( )。它会无形地“捕捉”来自 Chrome 的自动对焦，但任何想要通过链接切换的用户仍然可以正常执行此操作。

这种方法唯一的小缺点是它在循环时引入了第二个“死标签”。也就是说，用户必须按三次 Tab 才能从最后一个链接返回到第一个链接，而不是两次。

于 2016-09-18T20:58:02.277 回答
2

tabindex="-1"为我工作。tabindex="-1"我正在向输入添加自动对焦，直到我在输入之前为每个链接使用此属性时它才起作用。

至少可以说很奇怪。

于 2014-09-13T01:05:47.543 回答
0

这是解决问题的最佳方法。该tabindex="-1"解决方案损害了用户体验，与@link0ff 的解决方案相反，这个解决方案立即消除了焦点。

该元素应该是 DOM 中的第一个可聚焦元素： 

<button class="invisible-button"></button>

一旦它被聚焦，这只是删除按钮： 

function removeAutoFocus(e) {
    if (e.target.classList.contains("invisible-button")) {
        e.target.style.display = "none";
        document.removeEventListener("focus", removeAutoFocus);
    }
}
document.addEventListener("focus", removeAutoFocus, true);
于 2018-04-18T18:55:01.970 回答