Setting input focus after tab is clicked

Question

When a page has a search box with multiple tabs, one of the tabs is always selected; either the default tab is selected or the user has changed the tab. In either case the search input box of the selected tab should always have the keyboard focus so the user can just start typing their keywords.

Example: search box on http://www.lib.umd.edu/

Do you know how I could get the focus to be in the input box when a different tab is clicked? I got it to work on the first tab, but when I click another tab, the focus is lost.

The script I am using:

<script type="text/javascript" language="JavaScript">
    document.forms[''].elements[''].focus();
</script>

Is the page lib.umd.edu just a sample or is it the site you are working on? In your javascritpt you do not specify which element should receive the focus. — surfmuggle, Nov 01 '12 at 18:21
Were you able to solve the issue? Do you need any more explanations? — surfmuggle, Nov 07 '12 at 15:00

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Your code snippet

To set the focus on a certain element you have to specify which element should receive the focus. In your snippet this specification is missing:

document.forms[''].elements[''].focus();

If you want to you can use this line: document.getElementById("DuringSearch").focus(); DuringSearch is the id of the input element that should receive the focus <input id="DuringSearch" type="text">

The problem that needs to be solved is to change the id based on the tab that was clicked. There are several ways to achieve this. In a previous post is used an attribte named data-tab.

Example to wire up tabs and focus to input

To attach an event handler to a click on a tab you can do the follwing (using jQuery) on document.ready:

//  add event handler for click on tab
$("#tabs li").click(function () {                    
    loadTabs(this);
    setFocusOnInput(this);
    return false;
});

If you click on a tab the attached event fires and executes the 2 functions: loadTabs and setFocusOnInput.

To set the focus you need to know the id of that input-box. In my exmaple i am using an attribute data-tab

<li data-tab="Before">
    <a href="#Before">Before</a>
</li>

In my example i use the following function:

function setFocusOnInput(_this){
    var tab = $(_this).attr("data-tab"); 
    var searchId = tab + "Search"
    console.log("_this:", _this);   
    document.getElementById(searchId).focus();        
}

See more explanations on my previous post.

Could you elaborate what you want to know. Do you want to know how to wire it up in general or how to do it in a specific case?

score 1 · Accepted Answer · answered Nov 18 '13 at 11:54

$(document).ready(function () {

        setTimeout(function () {

 // focus on the txtenclude text area first visible and enabled input field or textarea
        $(":input:visible:enabled").each(function () {

            if ($(this).is('textarea')) {
                $(this).focus();
                return false;
            }

        });

    }, 1000);

Setting input focus after tab is clicked

2 Answers2

Your code snippet

Example to wire up tabs and focus to input