How to force focus to a panel input. Firefox addon sdk

Question

How to force focus to a panel input. Firefox addon sdk

616 views Asked by Spaceman At 08 November 2014 at 02:49

I'm running into an issue where if a focus even is fired of by javascript on the current window's page it steals focus from my addons input. Is there a way to force an input in a panel to stay focused.

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

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

I have tried the above which seems to work on my test page but not in my panel :(.

According to the docs -> https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel Setting focus to false should

Set to false to prevent taking the focus away when the panel is shown. Only turn this off if necessary, to prevent accessibility issue. Optional, default to true.

I have set my panel up as such.

    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")
        ]
    });

It doesn't append that setting it to false works :(.

Any help, guidance or comments would be awesome :) Cheers.

_____________ UPDATE ____________________________________________

There seemed to be some confusion of my bad explaining :( so i have uploaded a video to youtube that will hopefully explain the issue a bit better.

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

Also below find some more code.

Panel 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>

Hot Key Code

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

Panel js show listenter

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

Hopefully this is a bit clearer now :) thanks for the help so far :).

Original Q&A

There are 2 answers

**fedor.belov** · Answer 1 · 2014-11-09 14:45:50

This code focuses panel's input field when it opens:

main.js file:

//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 file which is injected into panel:

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

**erikvold** · Answer 2 · 2014-11-12 18:19:02

Here is a hacky, untested, solution:

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.

TechQA.

How to force focus to a panel input. Firefox addon sdk

There are 2 answers

Related Questions in FIREFOX

Related Questions in FIREFOX-ADDON

Related Questions in XUL

Related Questions in FIREFOX-ADDON-SDK

Popular Questions

Popular Tags

Trending Questions