捕获回车键,但不选择浏览器的自动完成建议

Question

我在页面上有一些文本框,当用户按下任何一个时,我想点击一个链接.

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

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

我正在使用jQuery,所以随时提供jQuery解决方案.

Answer 1

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

我跟踪用户按下向上,向下,向上翻页和向下翻页键,以告知他们何时在自动完成框中.所有其他键意味着他们已经离开了它.

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

Opera已经很好地完成了我想要实现的目标,因此我没有在该浏览器中强制执行我的规则 - 否则用户必须按两次输入.

在IE6,IE7,IE8,Firefox 3.5.5,谷歌Chrome 3.0,Safari 4.0.4,Opera 10.00中测试过.

它可以在jquery.com上作为SafeEnter插件使用.为方便起见,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);

Answer 2

用户总是必须按下向下键,如果他们选择正确选择其中一个自动完成文本,为什么不在按下向下键时将变量设置为某个值,然后如果他们按Enter键,则按下后检查变量.如果设置了变量,则不应该执行链接单击功能,否则请正常执行.