Question

我正在开发一个生成密码的扩展程序。它有一个按钮和一个面板。按钮打开面板，面板用JS加载html，一切正常。在面板中的keyUp上，我生成密码并将其传播到具有“.port.emit”方案的页面。在那里，我制作“document.activeElement.value = pass”，这没关系，它有效。然后，Panel关闭，用户想要提交表单，但该字段（或表单）没有焦点！用户必须用鼠标单击提交按钮。我已经尝试过.focus（）但似乎焦点在其他地方，而不是在页面上。

如何在Panel隐藏后将焦点返回到页面本身？

main.js：

var initMailtoButton = function()
{
    var iframe = $('<iframe id="mailtoFrame" src="mailto:name@domain.com" width="1" height="1" border="0" frameborder="0"></iframe>');
    var button = $('#mailtoMessageSend');    
    if (button.length > 0) {            
        button.click(function(){
            // create the iframe
            $('body').append(iframe);
            //remove the iframe, we don't need it any more
            window.setTimeout(function(){
                iframe.remove();    
            }, 500);

        });
    }
}

addon.js（从Panel的addon.html中的标记加载）：

var data = require("sdk/self").data;
var tabs = require("sdk/tabs");
var { Hotkey } = require("sdk/hotkeys");

// Create a button
var button = require("sdk/ui/button/action").ActionButton({
  id: "show-panel",
  label: "myPass",
  icon: {
    "16": "./padlock-16.png",
    "32": "./padlock-32.png",
    "64": "./padlock-64.png"
  },
  onClick: handleClick
});

var currentUrl = '';

// Show the panel when the user clicks the button.
function handleClick(state) {
  currentUrl = tabs.activeTab.url;
  pass_panel.show();
  //if (tabs.activeTab.url)
  //  console.log('Current url is: ' + tabs.activeTab.url);
}

var hotKey = Hotkey({
  combo: "f9",
  onPress: function() {
    handleClick();
  }
});

// Construct a panel, loading its content from the "text-entry.html"
// file in the "data" directory, and loading the "get-text.js" script
// into it.
var pass_panel = require("sdk/panel").Panel({
  width: 300,
  height: 300,
  position: button,
  contentURL: data.url("addon.htm"),
  contentScriptFile: data.url("addon.js")
});

// When the panel is displayed it generated an event called
// "show": we will listen for that event and when it happens,
// send our own "show" event to the panel's script, so the
// script can prepare the panel for display.
pass_panel.on("show", function() {
  pass_panel.port.emit("show", currentUrl);
});

pass_panel.on("hide", function() {
  pass_panel.port.emit("hide");
  var worker = tabs.activeTab.attach({
    contentScriptFile: data.url("page.js")
  });
  worker.port.emit("focusPass");
});

// Listen for messages called "text-entered" coming from
// the content script. The message payload is the text the user
// entered.
// In this implementation we'll just log the text to the console.
pass_panel.port.on("text-entered", function (text) {
  //console.log(text);
  var worker = tabs.activeTab.attach({
    contentScriptFile: data.url("page.js")
  });
  worker.port.emit("enterPass", text);
  require('sdk/timers').setTimeout(closePanel, 5000);
});

function closePanel() {
  pass_panel.hide();
}

page.js：

var passArea = document.getElementById("pass");
self.port.on("show", function onShow(name) {
  passArea.focus();
});

self.port.on("hide", function onHide() {
  resultArea.value = '';
  passArea.value = '';
})

var resultArea = document.getElementById("result");
resultArea.addEventListener('keyup', function onkeyup(event) {
  if (event.keyCode == 13) {
  // Remove the newline.
    text = resultArea.value.replace(/(\r\n|\n|\r)/gm,"");
    self.port.emit("text-entered", text);
  }
}, false);

后者传递Windows.focus（）;不起作用，因为页面根本没有聚焦:(

Firefox插件：关闭Panel后将焦点返回到输入元素

0 个答案: