Auto Focus In Google Chrome Extension

August 31, 2023 Post a Comment

I made a simple Chrome extension - search with a form. When I open the extension, there is no default focus on form, but it requires additional click. Focus is suppose to happen on

Solution 1:

the latest chrome has supported tabindex attribute. So you can use

<inputtype="text"id="mydata" tabindex="1" />

to make it work without any js codes. just FYI.

Solution 2:

Chrome supports autofocus which doesn't require any JavaScript.

<input type="text" id="mydata" autofocus />

Solution 3:

The issue with chrome extensions is that the entire popup.html document has no focus by default. Therefore it's simply not enough to set the focus on an element. You first need to reload the page.

Just put the following code into the page header:

<scripttype="text/javascript">functionInit () {
            if (document.hasFocus)
                setInterval ("checkFocus ()", 300);
        }
        functioncheckFocus () {
            if (!document.hasFocus ()) {
                document.location.reload();
            }            
        }
    document.getElementById('mydata').focus();
    </script>

Then call the code in your body tag:

<bodyonload="Init ();">

That's it. Please keep in mind that this solution is just a work-around. May future chrome versions fix the focus issue in extensions to make this workaround superfluous.

Solution 4:

Try something like this:

<html><head><scripttype="text/javascript">functionsetFocus()
{
     document.getElementById("target").focus();
}
</script></head><bodyonload="setFocus()"><inputtype="text"id="target"name="target"size="25"value="" /></body></html>

it works for me.

Solution 5:

functionsetFocus(loc) {
    window.open(loc, 'popup1', 'height=655,width=710,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no,minimizable=no').close();
    window.open(loc, 'popup1', 'height=655,width=710,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no,minimizable=no').status.fixed();
}

Then:

lnkSongTitle.Attributes.Add("onclick", "javascript:setFocus('url')");

or in html onClick call SetFocus() function

Html5 Academy