Question

当一个页面有一个带有多个标签的搜索框时，总会选中其中一个标签;选择默认选项卡或用户已更改选项卡。在任何一种情况下，所选标签的搜索输入框应始终具有键盘焦点，以便用户可以开始键入其关键字。

示例：http://www.lib.umd.edu/

上的搜索框

如果点击其他标签，您知道如何将焦点放在输入框中吗？我让它在第一个选项卡上工作，但是当我点击另一个选项卡时，焦点就会丢失。

我正在使用的脚本：

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

Answer 1

您的代码段

要将焦点设置在某个元素上，您必须指定哪个元素应该获得焦点。在您的代码段中缺少此规范：

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

如果您愿意，可以使用此行：document.getElementById("DuringSearch").focus(); DuringSearch是应该获得焦点<input id="DuringSearch" type="text">

的输入元素的ID

需要解决的问题是根据单击的选项卡更改ID。有几种方法可以实现这一目标。在之前的帖子中使用了一个名为data-tab的attribte。

Example to wire up tabs and focus to input

要将事件处理程序附加到选项卡上的单击，您可以在document.ready上执行以下操作（使用jQuery）：

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

如果单击选项卡，则附加事件将触发并执行2个函数：loadTabs和setFocusOnInput。

要设置焦点，您需要知道该输入框的ID。在我的例子中，我正在使用属性data-tab

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

在my example我使用以下功能：

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

查看有关my previous post的更多解释。

你能详细说明一下你想知道什么吗？您是否想知道如何在一般情况下连接它或如何在特定情况下进行连接？

Answer 2

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

单击选项卡后设置输入焦点

2 个答案:

您的代码段

Example to wire up tabs and focus to input