javascript - 按键打开未聚焦的选项卡

Question

我有以下代码，可以正常工作:

// 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 中遇到了这种行为。它在 Google Chrome 中运行良好，我还没有在任何其他浏览器上尝试过。不幸的是，我需要让它在 IE8 中工作。

Answer 1

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

Ensure that all of the pop-up windows in your Web site open as the direct result of a user action, such as clicking a page element, or tabbing to a link and then pressing ENTER.

事实上，你的代码根本不适合我，IE 默认弹出窗口阻止程序只是阻止了它。我认为这是 Not Acceptable ，因为大多数用户不允许。

我通过在按下回车键时将焦点移动到隐藏链接(与按 Tab 键相同)来解决这个问题(很重要，因为在按键后为时已晚)，并且当释放它时，它将与按回车键相同在该链接上时，弹出窗口将打开。

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 并根据浏览器有条件地使用适当的解决方案。