陷入关键，但不是在选择浏览器自动完成的建议

Question

我有一些文本框在一个页面上，我想的点击的链接时的用户按下输入任何他们。

我可以很容易陷入按钮使用javascript(通过寻找13 event.keyCode 和 event.which的)，但是我命中的一个问题，当浏览器自动完成的功能踢，并表明用户可能想要的类型。我们发现的用户经常的新闻输入接受的浏览器中的建议，而不是标签。这个混淆用户，作为该链接的点击即刻，而他们仍然打算输入文本的一些其他领域。

我知道它将更好地使用的形式和提交按钮在这里，但由于各种原因，这是不实际的。

我使用的jQuery，以便随时提供jQuery的解决方案。

Answer 1

用户总是需要按向下键，如果他们选择，选择的自动完成文本正确的，可变的，当他们按向下键为什么不能设置的东西，然后如果他们做的进入新闻界之后你检查变量。你不应该做链接点击功能，如果变量设置，否则这样做是正常的。

Answer 2

在接受的答案使用tuanvt的想法，我写了一个jQuery插件，没有工作。

当用户按下向上，向下，向上翻页和向下翻页键来告诉当他们在自动完成框中我跟踪。所有其它的键意味着他们已经离开了。

我确保我们只将这些规则应用于文本框：所有其它输入元件表现正常

。

歌剧已经做了什么，我想实现一个不错的工作，所以我并不强制在浏览器中我的规则 - 否则，用户将不得不按两次回车键

在IE6，IE7，IE8，火狐3.5.5，谷歌浏览器3.0，Safari浏览器4.0.4，歌剧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 3

尝试设置自动完成关上你的复选框，虽然这并不适用于所有浏览器的标准，但它工作在常见的浏览器。

<input type="text" autocomplete="off" />

Answer 4

jQuery是好的，但所有的为什么不能用简单的JavaScript？

function submit_on_enter(e) {
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = (e.keyCode ? e.keyCode : e.which);
    else return true;

    if (keycode == 13) {
        if (window.previousKeyCode) {
            // down=40,up=38,pgdn=34,pgup=33
            if (window.previousKeyCode == 33 || window.previousKeyCode == 34 ||
                window.previousKeyCode == 39 || window.previousKeyCode == 40) {
                    window.previousKeyCode = keycode;
                    return true;
            }
        }
        submit_form();
        return false;
    } else {
        window.previousKeyCode = keycode;
        return true;
    }
}

Answer 5

跟踪输入的keyup事件的关键，选择由您检测输入的keyup事件关键的时间内完成。

检测在KEYDOWN输入键和做操作与自动完成功能造成干扰。

Answer 6

这对我的作品：

$('input').keypress(function(e) {
    if(e.which == 13) {
        if(this.value)
        {
            $("#submitbutton").click();
        }
    }
});

Answer 7

如果您正在使用新的HTML5表单字段类型，你不妨改变teedyay的代码如下：

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],[type=email],[type=number],[type=search],[type=tel],[type=url])') || $.browser.opera)
                    {
                        ...

请注意，新的输入类型。

Answer 8

我不知道如果你被捕键的窗口，或在特定DOM要素。你应该做的，后者(例如在 form 元)，则在事件处理程序，看到事件的对象，以确定哪DOM素是原籍的活动。如果这是一个文本领域与自动完成的，然后 return false;.

看看google i/o大会的 .keypress() 事件处理程序， event.target 酒店的事件的对象。

Answer 9

我面临着同样的问题，虽然不完美，但我用另一种方法，我认为简单。在创建自动完成我设置的当前时间选择事件，然后采取任何行动之前，它比较：

$('#completer').autocomplete({
  source: ['First', 'Last'], delay: 0, minLength: 0,
  select: function(ev, ui) {
    $(ev.target).data('lastAutocompleteSelectTimestamp', new Date().getTime())
  }
})

$(document).on('keydown', '#completer', function(ev){
  if (ev.which != 13) return
  var lastAutocompletionTime = $(ev.currentTarget).data('lastAutocompleteSelectTimestamp')
  if (!lastAutocompletionTime || (new Date().getTime() - lastAutocompletionTime) > 100)
    alert('Enter pressed outside autocomplete context')
})

<html>
<head>
  <link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
  <input id=completer type=text />
</body>
</html>