按键打开未聚焦的选项卡

Posted 2023-05-09

【中文标题】按键打开未聚焦的选项卡

【英文标题】：Key press opening unfocused tab

【发布时间】：2012-07-26 06:27:41

【问题描述】：

我有以下代码可以正常工作：

// click on the button
$(".btnHeaderSearch").click(function(event) 
 
    event.preventDefault();
    window.open('/search.aspx?phrase=' + $('.txtHeaderSearch').val());
);

它将在新窗口/选项卡中打开 search.aspx，并且该窗口/选项卡将具有焦点或位于所有其他窗口/选项卡的前面。

但是，下面的代码不起作用：

// press enter key when textbox has focus to simulate button click:
$('.txtHeaderSearch').bind('keyup', function(e) 
    if ( e.keyCode === 13 )  // 13 is enter key
        window.open('/search.aspx?phrase=' + $('.txtHeaderSearch').val());
    
);

这里发生的情况是窗口/选项卡确实打开了，但它在所有其他窗口后面打开了一个窗口，或者它打开了一个选项卡而不给选项卡焦点，所以我最终留在了原始页面上。

如何按下回车键来打开一个窗口/选项卡，其行为方式与上面的按钮单击相同？即我希望这两个代码位都可以打开一个窗口或选项卡，该窗口或选项卡立即具有焦点，就像当前单击一样。

我在 IE8 中遇到了这种行为。它在谷歌浏览器中运行良好，我没有在任何其他浏览器上尝试过。不幸的是，我需要让它在 IE8 中工作。

【参考方案1】：

来自http://msdn.microsoft.com/en-us/library/ie/ms537632(v=vs.85).aspx：

确保您网站中的所有弹出窗口都以 用户操作的直接结果，例如单击页面元素，或 跳到一个链接，然后按 ENTER。

事实上，你的代码根本不适合我，IE 默认的弹出窗口拦截器只是阻止了它。我认为这是不可接受的，因为大多数用户都不允许这样做。

我通过在按下 enter 时将焦点移动到隐藏链接（与 tab 键相同）来解决它（很重要，因为在 keyup 之后为时已晚），当它被释放时，它将与按 enter 相同而在该链接上，以便弹出窗口打开。

html：

<input class="txtHeaderSearch">
<a id="hidden-link" href="#">needs to have content</a>

CSS：

#hidden-link 
    position: absolute;
    left: -9999px;
    top: -9999px;

javascript：

$('.txtHeaderSearch').bind('keydown', function(e) 
    if (e.which === 13)  // which is normalized by jQuery
        $("#hidden-link").focus();
    
);

$("#hidden-link").click(function() 
    var win = window.open('/search.aspx?phrase=' + $('.txtHeaderSearch').val());
    //win.focus(); 
    //The above is optional, if the window opens but doesn't focus then uncomment the above line
);

演示：

http://jsfiddle.net/UCcqM/2/

同样的解决方法不适用于其他浏览器，因此您需要检测 IE 并根据浏览器有条件地使用适当的解决方案。

【参考方案2】：

当有人在文本框内按回车键时，使用它来点击按钮：

// press enter key when textbox has focus to simulate button click:
$('.txtHeaderSearch').keyup(function(e) 
    if ( e.keyCode === 13 )  // 13 is enter key
        $(".btnHeaderSearch").click();    
    
);

【讨论】：

这是否意味着IE8不能做到这一点？

【参考方案3】：

您可以尝试像这样在 .txtHeaderSearch keyup 事件上点击 .btnHeaderSearch。

$('.txtHeaderSearch').bind('keyup', function(e) 
    e.preventDefault();
    if (e.keycode === 13)    
        $('.btnHeaderSearch').click();
    

【讨论】：

也许先尝试添加阻止默认值，因为我已经编辑了上面的答案以显示。

这也没什么区别。

你可能会尝试做这样的事情 window.open('/search.aspx?phrase=' + $('.txtHeaderSearch').val()).focus() - 添加焦点（ ) 最后，但结果可能不可靠

似乎对 IE8 没有任何影响。

【参考方案4】：

我在 IE8 中测试过这个

http://jsfiddle.net/74mtV/2/

当它第一次发生时，它会发出弹出警告，并且没有打开任何窗口，但在允许它之后，两个事件都会打开一个新的弹出窗口，并将焦点设置在它上面。

在正常模式和启用兼容性的情况下进行了测试。

【讨论】：

我在第一次测试中得到了与您相同的结果，即关于我同意允许的弹出窗口的警告消息。之后，它会打开一个新标签，但没有重点。为什么它会为你打开一个焦点标签，而不是为我打开？

我在 MSIE 8 中测试，但版本写成：版本 8.0.6001.18702 你的也一样吗？

有些插件会干扰，你可以禁用所有插件还是从工具-管理插件中一一禁用？看看这是否能解决你的问题。

好的“在后台打开选项卡或立即切换到它的选项在这里：工具 > Internet 选项 > 常规选项卡 > 选项卡设置按钮。“打开时总是切换到新选项卡”

【参考方案5】：

例如：

    <form action="page2" method="get" onsubmit="return func()">
      <input type="text" name="search"/>
    </form>

在文本框中写入内容并按回车将调用 func()，当返回 true 时，将提交表单 (http://example.com?search=....)

因此，对于您的问题，您只需替换示例中的值并定义一个函数来处理预提交作业。

【参考方案6】：

可能是动态绑定的问题，下面的链接对我有用， http://jsfiddle.net/madhuvana/McaXj/2/