-1

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

示例：http ://www.lib.umd.edu/ 上的搜索框

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

我正在使用的脚本：

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

2 回答 2

1

你的代码片段

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

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

如果你愿意，你可以使用这一行：document.getElementById("DuringSearch").focus(); DuringSearch是应该接收焦点的输入元素的 id<input id="DuringSearch" type="text">

需要解决的问题是根据被点击的标签改变id。有几种方法可以实现这一点。在上一篇文章中使用了一个名为 data-tab 的属性。

连接选项卡并专注于输入的示例

要将事件处理程序附加到单击选项卡上，您可以在 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>

在我的示例中，我使用以下函数：

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

在我之前的帖子中查看更多解释。

您能否详细说明您想知道的内容。您想知道如何在一般情况下进行接线或如何在特定情况下进行接线吗？

于 2012-11-01T18:18:17.337 回答
0 
$(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);
于 2013-11-18T11:54:41.247 回答