Question

我在iframe.html中有一个加载在index.html中的画布。在iframe.html内，游戏通过window.addEventListener('keypress', press, false);获得键盘输入。

这很有效。但是，如果用户在任何时候按下tab，则iframe会失去焦点，并且无法将其取回（即使您单击iframe /画布上也是如此）。鼠标输入继续工作 - 但键盘被忽略。

我发现的一个解决方案是将其放在index.html中：

setInterval(function(){document.getElementById("content").contentWindow.focus();},100);

（"content"是iframe的id。

这个问题是：1。它不断运行这个BS代码，以及2.我可能或者可能无法控制将来index.html中的内容（我可能会在第三方托管这个代码）的网站）。

所以我假设有一个解决方案不会不断执行重新聚焦代码，并且不需要在包含iframe的网页中使用任何代码。

注意 - 如果“tab”失去焦点，我会完全没问题 - 但是需要有一种方法让用户重新给予iframe焦点。

Answer 1

在iframe文档中，您是否可以在document上event.preventDefault();上调用keydown添加事件监听器？此外，以同样的方式，您是否可以添加一个click事件监听器，在您想要关注的任何内容上调用focus()？如果它不是自然可聚焦的元素，请添加tabindex="1"。

我可能不会考虑iframe的某些功能，但这似乎应该可行。

document.querySelector('div').addEventListener('click', ()=>{
  document.querySelector('div').focus();
});

document.querySelector('div').addEventListener('keydown', (e)=>{
  if (e.key === 'Tab') {
    e.preventDefault();
  }
});

div {
  background-color: red;
}

div:focus {
  background-color: blue;
}

<div tabindex="0">I'm bad for accessibility!</tabindex>

画布键盘焦点通过iframe（抵制制表符切换）

1 个答案: