Question

I have the following code which works fine:

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

It will open search.aspx in a new window/tab and the window/tab will have focus or will be infront of all other windows/tabs.

However, the following code not work:

// 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());
    }
});

What happens here is that the window/tab does open, but it opens a window behind all other windows, or it opens a tab without giving the tab focus, so I end up remaining on the original page.

How do I get the enter key press to open a window/tab which behaves the same way as the button click above? i.e. I want both bits of code to open a window or tab which has focus instantly just as the click even currently does.

I’m getting this behaviour in IE8. It works fine in Google Chrome and I’ve not tried it on any other browser. Unfortunately, I need to get this to work in IE8.

Answer 1

From 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.

In fact your code didn’t work for me at all, the IE default popup blocker just blocked it. I consider that unacceptable since most users would not allow it.

I worked around it by moving the focus to a hidden link (same as tabbing to it) when enter is pressed down (important as it’s too late after keyup), and when it is released it will be the same as pressing enter while on that link so the popup opens.

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
});

Demo:

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

This same workaround doesn’t work for other browsers, so you need to detect IE and conditionally use the appropriate solution depending on the browser.