Setting input focus after tab is clicked - input

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>

Answer 1

$(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);

Answer 2

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">
Before
</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?