javascript - 捕获回车键，但在选择浏览器的自动完成建议时不会

Question

我在页面上有一些文本框，我想在用户按下其中任何一个时输入一个链接。

我可以使用 javascript 轻松捕获输入按钮(通过在 event.keyCode 和 event.which 中查找 13)，但是当浏览器自动完成时我遇到了一个问题功能启动并建议用户可能想要输入的内容。我们发现用户经常按 enter 键接受浏览器的建议，而不是按 tab 键。这会使用户感到困惑，因为会立即单击链接，而他们仍打算在其他一些字段中输入文本。

我知道在这里使用表单和提交按钮会更好，但出于各种原因这不切实际。

我正在使用 jQuery，所以请随意提供 jQuery 解决方案。

Answer 1

在接受的答案中使用 tuanvt 的想法，我编写了一个 jQuery 插件来完成这项工作。

我跟踪用户何时按下向上键、向下键、向上翻页键和向下翻页键，以判断他们何时处于自动完成框中。所有其他键都表示他们已经离开了。

我确保我们只将这些规则应用于文本框:所有其他输入元素都正常运行。

Opera 已经很好地完成了我想要实现的目标，因此我不会在该浏览器中强制执行我的规则 - 否则用户将不得不按两次 enter。

在 IE6、IE7、IE8、Firefox 3.5.5、Google Chrome 3.0、Safari 4.0.4、Opera 10.00 中测试。

它在 jquery.com 上作为 SafeEnter plugin 可用。 .为方便起见，1.0版本代码如下:

// jQuery plugin: SafeEnter 1.0
// http://plugins.jquery.com/project/SafeEnter
// by teedyay
//
// Fires an event when the user presses Enter, but not whilst they're in the browser's autocomplete suggestions

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

                    case 40:
                    case 38:
                    case 34:
                    case 33:
                        // down=40,up=38,pgdn=34,pgup=33
                        $(this).data('safeEnter_InAutocomplete', true);
                        break;

                    default:
                        $(this).data('safeEnter_InAutocomplete', false);
                        break;
                }
            });
        });
    };

    $.fn.clickOnEnter = function(target)
    {
        return this.each(function()
        {
            $(this)
                .listenForEnter()
                .bind('pressedEnter', function()
                {
                    $(target).click();
                });
        });
    };
})(jQuery);