如何强制焦点到面板输入。火狐插件sdk答案

【问题标题】：How to force focus to a panel input. Firefox addon sdk如何强制焦点到面板输入。火狐插件sdk
【发布时间】：2014-11-08 02:49:03
【问题描述】：

我遇到了一个问题，如果当前窗口页面上的 javascript 触发了焦点，它会从我的插件输入中窃取焦点。有没有办法强制面板中的输入保持焦点。

    $(inputSelector).focusout(function(){
        $(inputSelector).focus();
    }); 

    $(inputSelector).blur(function(){
        $(inputSelector).focus();
    });

我已经尝试了上述方法，这似乎在我的测试页面上有效，但在我的面板中无效:(。

根据文档 -> https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel 将焦点设置为 false 应该

设置为 false 以防止在显示面板时将焦点移开。仅在必要时将其关闭，以防止可访问性问题。可选，默认为 true。

我已经这样设置了我的面板。

    var text_entry = require("sdk/panel").Panel({
        width: text_entry_width,
        height: text_entry_h,
        focus: false, // doesnt seem to work....

        contentURL: data.url("entry.html"),

        contentScriptFile: [
            data.url("jquery-2.1.1.min.js"),
            data.url("text.js")
        ],

        contentStyleFile: [
            data.url("styles.css")
        ]
    });

它不会附加将其设置为 false 的工作:(。

任何帮助、指导或 cmets 都会很棒 :) 干杯。

_____________ 更新 _______________________________

我的不好解释似乎有些混乱:(所以我上传了一个视频到 youtube，希望能更好地解释这个问题。

https://www.youtube.com/watch?v=5fhJzpa515Y&feature=youtu.be

还在下面找到更多代码。

面板 Html

    <html>
        <head></head>
        <body>
            <div id="resultTableTop" class="resultTable"></div>
            <input type="text" id="edit-box"></input>
            <div id="resultTableBottom" class="resultTable"></div>
        </body>
    </html>

热键代码

    var showHotKey = Hotkey({
        combo: "accel-t",
        onPress: function() {
            text_entry.show();
        }
    });

面板 js 显示监听器

    self.port.on("show", function onShow() {
        $('input').focus();
        console.log('hi');
    });

希望这现在更清楚了 :) 感谢到目前为止的帮助 :)。

【问题讨论】：

Panel 在设计上是非模态的。你不能也不应该强迫用户与之交互。
这似乎有点傻，我在我的文本框中输入一半，一些 java 脚本成为焦点。我的印象是，您至少可以按照我的 jquery 代码行做一些 hacky。目标不是强迫用户，而是当用户选择与输入交互时，我希望能够将焦点保持在输入上。
您的意思是网页脚本从您的面板中窃取了焦点？
你可以做到，使用 addon-sdk 是 hacky，使用非 addons-sdk 它不是 hacky。但是，是的，请回答paas q plz。
是的，在 sdk 中进行测试期间，如果我的插件集中在搜索栏上打开主页时，搜索栏会窃取焦点（来自网页）。

标签： firefox firefox-addon xul firefox-addon-sdk

【解决方案1】：

此代码在打开时关注面板的输入字段：

main.js 文件：

//main.js file
var text_entry = require("sdk/panel").Panel({
    focus: true, //THIS SHOULD BE TRUE
    contentURL: data.url("panel.html"),
    contentScriptFile: [
        data.url("js/libs/jquery-1.11.1.js"),
        data.url("get-text.js")
    ]
});

text_entry.on("show", function() {
    text_entry.port.emit("show");
});

get-text.js 注入到面板中的文件：

//data/get-text.js file
self.port.on("show", function onShow() {
    $('input').focus();
});

【讨论】：

我目前使用的已经很抱歉我应该包含它。当面板启动时，问题是没有获得焦点，而是保持焦点。本质上，我在页面加载期间打开面板，我开始输入焦点。在页面就绪时会在 windows javascript 上触发，并在其中某处调用焦点。当我的面板处于活动状态时，我想阻止主 firefox 窗口获得焦点。
同样将焦点从 true 更改为 false 似乎没有任何作用。
我已经对此进行了测试，但它无法保持焦点。我会录制一个视频，我想把它放上来。也许它是一个错误:(

【解决方案2】：

这是一个 hacky、未经测试的解决方案：

var { viewFor } = require("sdk/view/core");
var { Panel } = require("sdk/panel");


var panel = Panel({
  ..
  onShow: function() {
    var view = viewFor(panel);
    view.setAttribute("noautohide", "true");
  }
})

For more information of the panel noautohide attribute click here.

【讨论】：

感谢您的回答，我今晚回家后会尝试实施它。
如果不首先防止焦点问题，这只会在焦点丢失时防止窗口消失:(
require("sdk/view/core").getActiveView(panel) 将用于获取 XUL 元素
这种技术似乎可以使面板模型化，但随后无法关闭。我认为需要的是一个模态面板，它只能使用工具栏切换按钮打开和关闭，而不会因失去焦点而关闭