Question

我目前正在开发chrome扩展程序，为了使其工作，我经常需要脚本来聚焦输入字段。我知道这可以通过使用像

这样的东西来实现

document.getElementById('field').focus();

它完美无缺。但是，它需要您保持活动和聚焦的选项卡，否则focus（）事件将不会触发。要更好地解释它，只需考虑此代码并在谷歌的主页上运行它：

document.getElementById('lst-ib').focus();

当然，你会看到光标进入搜索字段。但是，如果您放置一个setTimeout，启动脚本然后离开使用谷歌的选项卡，您可以看到由于选项卡未处于活动状态而未触发focus（）事件。所以我的问题是：是否可以激活一个focus（）事件，甚至可以模拟它，而鼠标不在您要运行代码的页面上？我还没有发现任何相关内容，所以这可能是一个愚蠢的问题，我为此道歉，但我无法想象是否有办法实现我的目标。谢谢！

我没有提出任何具体的代码只是因为我没有寻找一个精确的答案，但对于一般的答案，我希望可能对其他人更有用。确切地说，我的扩展程序将在此HTML上运行（我不能在这里放置确切的页面，因为它需要内部人员登录）：

<input type="number" min="1" max="1000000000000000" id="num" placeholder="Insert a number" aria-required="true">
<button id="submit">Go!</button>

输入一个数字并检查其属性，例如如果它是主要的。这是我正在使用的代码。内容脚本：

var x;//global
chrome.runtime.sendMessage({ask: "number"}, function(response)    {
x=response.number;
});

document.getElementById('num').value=x;//insert number
document.getElementById('num').focus();//focus field
document.getElementById('submit').click();//click submit button
chrome.runtime.sendMessage({do : "increment"});//communicates with bgpage asking to increment x

其中x是来自后台脚本的变量，在每次迭代时递增1。这些是 bgpage ：

中的部分

var x=0;
chrome.runtime.onMessage.addListener(function(request, sender) {
if (request.do == 'increment'){//this is the increment of x
x+=1;}
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)    {
if (request.ask == 'number'){//and here it's sending the value of x
     sendResponse({number: x});
}
});

最后，我的清单中唯一重要的是我拥有以下权限：

"permissions": [
    "tabs",
    "activeTab"
    ],

如果我设置值没有聚焦字段，它就像我没有在字段中输入任何内容，因为我没有点击它。相反，如果我手动插入值，它会没有问题。因此，使用focus（）指令它可以工作，但如果选项卡变为非活动状态，它将停止工作，就好像该字段为空。所以我想知道的是如何在没有鼠标在页面上的情况下使focus（）工作，因为扩展应该运行大约1-2个小时，并且让所有选项卡保持活动状态会很困难。那个时候。

现在我认为这个问题应该足够清楚了，关于这个特定问题，我没有其他内容可以写，因为代码的剩余部分正在运行，我发布的代码应该足以重现行为。

Answer 1

我不确定您的代码可能出现什么问题，但此示例将关注页面失去焦点时的第一个文本框，然后5秒钟后将关注第二个文本框。对于这个例子，我只在页面失去焦点时才这样做。

您也可以对其进行设置，以便在页面未处于活动状态时创建重复焦点事件，然后在页面再次获得焦点后删除这些重复事件。

var grabFocus = function(id) {
  var d = new Date();
  //Added print outs to show the focus location and times
  console.log('focusing on ' + id);
  console.log(d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());
  document.getElementById(id).focus();
}

$(document).ready(function() {
  var hidden, visibilityState, visibilityChange;

  if (typeof document.hidden !== "undefined") {
    hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState";
  }

  var document_hidden = document[hidden];

  document.addEventListener(visibilityChange, function() {
    if (document_hidden != document[hidden]) {
      if (document[hidden]) {
        //Document is hidden
        grabFocus('test');
        window.setTimeout(function() {
          grabFocus('delay')
        }, 5000);
      } else {
        // Document shown
      }

      document_hidden = document[hidden];
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" type="text" />
<input id="delay" type="text" />

鼠标离开时模拟焦点（）

1 个答案: