Dodging the browser's autocomplete when capturing the user pressing Enter

You often need your web page to catch when the user presses Enter, and most of the time you want to click a button or a link when they do this.

This is nice and easy in javascript, but the browser's autocomplete feature can get in the way a bit: often the user will start typing, see the autocomplete suggestions, tap the down arrow a couple of times to pick one, then press enter to pick it.

If your javascript kicks in at this point, that's probably not what your user meant to happen: they just wanted to select that item from the autocomplete suggestions - they didn't want to click the "Next" link just yet.

I posted a question on stackoverflow to see if anyone else had found a solution to this that was better than saying "press tab, not enter!" to your users.

No one had an out-of-the-box solution, but one user suggested tracking the user pressing the up and down arrow keys - they'd have to press these to get into the autocomplete suggestions.

Much as this seems like a solution made out of string and sellotape, it totally works! We need a few more tweaks (catching page up/ page down too; not doing anything in Opera because it already does it itself).

I've implemented this in jQuery and made it available on jQuery.com as the SafeEnter plugin.

You can use it like this, to click an element when the user presses enter:

$('#myTextbox').clickOnEnter(myElement);

. or you can handle the event yourself like this:

$('#myTextbox')
    .listenForEnter()
    .bind('pressedEnter', <span style="color: #0000ff">function</span>()
    {
        <span style="color: #008000">// Do stuff</span>
    });

To save you going hunting for it, the full code of the plugin's here:

<span style="color: #008000">//codesnippet:2e23681e-c3a9-46ce-be93-48cc3aba2c73</span>
(<span style="color: #0000ff">function</span>($)
{
    $.fn.listenForEnter = <span style="color: #0000ff">function</span>()
    {
        <span style="color: #0000ff">return</span> <span style="color: #0000ff">this</span>.each(<span style="color: #0000ff">function</span>()
        {
            $(<span style="color: #0000ff">this</span>).<span style="color: #0000ff">focus</span>(<span style="color: #0000ff">function</span>()
            {
                $(<span style="color: #0000ff">this</span>).data('safeEnter_InAutocomplete', <span style="color: #0000ff">false</span>);
            });
            $(<span style="color: #0000ff">this</span>).keypress(<span style="color: #0000ff">function</span>(e)
            {
                <span style="color: #0000ff">var</span> key = (e.keyCode ? e.keyCode : e.which);
                <span style="color: #0000ff">switch</span> (key)
                {
                    <span style="color: #0000ff">case</span> 13:
                        <span style="color: #008000">// Fire the event if:</span>
                        <span style="color: #008000">//   - we're not currently in the browser's Autocomplete, or</span>
                        <span style="color: #008000">//   - this isn't a textbox, or</span>
                        <span style="color: #008000">//   - this is Opera (which provides its own protection)</span>
                        <span style="color: #0000ff">if</span> (!$(<span style="color: #0000ff">this</span>).data('safeEnter_InAutocomplete') || !$(<span style="color: #0000ff">this</span>).is('input[type=text]') || $.browser.opera)
                        {
                            $(<span style="color: #0000ff">this</span>).trigger('pressedEnter', e);
                        }
                        $(<span style="color: #0000ff">this</span>).data('safeEnter_InAutocomplete', <span style="color: #0000ff">false</span>);
                        <span style="color: #0000ff">break</span>;

                    <span style="color: #0000ff">case</span> 40:
                    <span style="color: #0000ff">case</span> 38:
                    <span style="color: #0000ff">case</span> 34:
                    <span style="color: #0000ff">case</span> 33:
                        <span style="color: #008000">// down=40,up=38,pgdn=34,pgup=33</span>
                        $(<span style="color: #0000ff">this</span>).data('safeEnter_InAutocomplete', <span style="color: #0000ff">true</span>);
                        <span style="color: #0000ff">break</span>;

                    <span style="color: #0000ff">default</span>:
                        $(<span style="color: #0000ff">this</span>).data('safeEnter_InAutocomplete', <span style="color: #0000ff">false</span>);
                        <span style="color: #0000ff">break</span>;
                }
            });
        });
    };

    $.fn.clickOnEnter = <span style="color: #0000ff">function</span>(target)
    {
        <span style="color: #0000ff">return</span> <span style="color: #0000ff">this</span>.each(<span style="color: #0000ff">function</span>()
        {
            $(<span style="color: #0000ff">this</span>)
                .listenForEnter()
                .bind('pressedEnter', <span style="color: #0000ff">function</span>()
                {
                    $(target).click();
                });
        });
    };
})(jQuery);