我正在开发一个生成密码的扩展程序。它有一个按钮和一个面板。按钮打开面板,面板用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();不起作用,因为页面根本没有聚焦:(