Question

如何停止我的Google Chrome扩展程序的默认操作，以自动关注我popup.html中的第一个链接？我知道我可能会用JS做一些迂回的黑客攻击或改变：聚焦CSS，但我认为这会抛弃我试图做的其他事情，而我更愿意阻止它的根本原因。

Answer 1

最简单（和javascript免费！）的方法是简单地将tabindex="-1"添加到您不希望自动关注的任何元素。

Answer 2

也许自动对焦是为了方便起见，但通常会造成伤害。由于我认为无法阻止根本原因，我找到了一些环形交叉路口。一个是使用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);
});

另一个pure HTML solution是将tabindex =“1”添加到body标签。

Answer 3

使用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);

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

Answer 4

另一个简单的替代方案（保留＆＃34; tabbability＆＃34;）只是在第一个实际链接之前添加一个空链接（<a href="#"></a>）。它将无形地捕获＆＃34; Chrome自动对焦，但任何想要通过链接进行制表的用户仍然可以正常使用。

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

Answer 5

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

至少可以说是奇怪的。

Answer 6

这是解决问题的最佳方法。 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);

Chrome扩展程序 - 第一个链接在弹出窗口中自动聚焦

6 个答案: