Trap die Enter-Taste, aber nicht, wenn der Autocomplete-Vorschlag des Browsers Auswahl

Question

Ich habe einige Textfelder auf einer Seite und ich möchte einen Link klicken, wenn der Benutzer drückt in jedem von ihnen ein.

Ich kann einfach die Falle Enter-Taste mit Hilfe von Javascript (von 13 in event.keyCode und event.which suchen), aber ich traf ein Problem, wenn die Funktion zum automatischen Vervollständigung Tritte des Browsers in und schlagen vor, was der Benutzer wünschen kann zu geben. Wir finden die Benutzer oft drücken geben Sie den Browser-Vorschlag zu akzeptieren, anstatt Tab. Das verwirrt die Nutzer als der Link sofort geklickt wird, während sie noch einen Text einige der anderen Felder eingeben möchte.

weiß ich, es wäre besser, ein Formular zu verwenden und eine Submit-Button hier, aber aus verschiedenen Gründen, die nicht praktikabel sind.

Ich bin mit jQuery, so fühlen sich frei jQuery-Lösungen anbieten zu können.

Answer 1

Benutzer muss immer die untere Steuertaste drücken, wenn sie wählen eine der Auto-Vervollständigen-Text rechts wählen, warum nicht eine Variable auf etwas gesetzt, wenn sie die untere Steuertaste drücken, und dann, wenn sie die Presse geben Sie danach überprüfen Sie die Variable. Sie sollten den Link klicken Funktion nicht tun, wenn die Variable gesetzt ist, sonst ist es normal tun.

Answer 2

Idee Mit tuanvt des in der akzeptierten Antwort, schrieb ich eine jQuery-Plugin, das die Arbeit erledigt.

ich verfolgen, wenn der Benutzer die oben drückt, nach unten, Seite-up und Seite-down-Tasten sagen, wenn sie in der Autocomplete-Feld sind. Alle anderen Tasten bedeuten sie es verlassen haben.

Ich stelle sicher, dass wir nur diese Regeln gelten Textboxen: alle anderen Eingabeelemente verhalten sich normal

.

Opera hat bereits eine ziemlich gute Arbeit, was ich versuche, zu erreichen, so dass ich nicht erzwingen nicht meine Regeln in diesem Browser -. Sonst würde der Benutzer drücken muß zweimal eingeben

Getestet in IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00.

Es ist verfügbar auf jquery.com wie das SafeEnter Plugin . Für Ihre Bequemlichkeit 1.0 der Code für die Freigabe ist wie folgt:

// 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

Versuchen Sie, die zur automatischen Vervollständigung off auf dem Kontrollkästchen Einstellung, obwohl dies für alle Browser ist nicht Standard, aber es funktioniert auf den gängigen Browsern.

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

Answer 4

JQuery ist schön und alle, aber warum nicht einfach JavaScript verwenden?

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

Spur eingeben Ab-Taste auf keyup Ereignisse wird die Auswahl durch die Zeit abgeschlossen Sie Enter-Taste auf keyup Ereignisse erfassen.

auf keydown Enter-Taste zu erfassen und tun Betrieb mit dem automatischen Vervollständigung Funktionalität beeinträchtigen.

Answer 6

Dies funktioniert für mich:

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

Answer 7

Wenn Sie die neuen html5 Formularfeldtypen verwenden, können Sie möchten teedyay den Code ändern, wie folgt:

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)
                    {
                        ...

Beachten Sie die neuen Eingabearten.

Answer 8

Ich bin mir nicht sicher, ob Sie Tastendrücke auf dem Fenster sind Trapping oder auf bestimmte DOM-Elemente. Sie sollten die letzteren (beispielsweise auf dem form Elemente) tun, dann in Ihren Event-Handler, schauen Sie in das Ereignisobjekt, das DOM-Element war der Ursprung des Ereignisses zu bestimmen. Wenn dies ein Textfeld mit dem automatischen Vervollständigung, dann return false;.

Werfen Sie einen Blick auf jQuery .keypress() Event-Handler und die event.target Eigenschaft des Ereignisobjekts.

Answer 9

ich vor dem gleichen Problem und zwar nicht perfekt verwendete ich einen anderen Ansatz, den ich einfacher betrachten. Wenn die Autovervollständigung zu schaffen habe ich die aktuelle Zeit für das ausgewählte Ereignis und dann vergleichen Sie es, bevor Sie irgendwelche Maßnahmen ergreifen:

$('#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>

Answer 10

Ein weiterer (sicherer) Ansatz ist es, die keyup und keydown Ereignisse verwenden, um Wertänderungen zu erkennen.

Automatische Vervollständigung setzt den Wert nach der keyDown Veranstaltung. Wenn beiden Ereignisse beobachtet werden, die folgende ist viel zuverlässiger als die anderen Lösungen:

var tempValue;
// fire when enter is 1. pressed and 2. released
function handlerEnter(type){
     // save the value for comparison
     if(type == 'keyDown'){
         tempValue = document.activeElement.value;
         return null; // quit
     }

     // quit when the value changed in between keyDown & keyUp
     if(type == 'keyUp' && tempValue != document.activeElement.value){
         return null;
     }

     // autocomplete wasn't used
     doStuff();
}

^{_{Sie können prüfen wollen, ob document.activeElement ein Eingang ist. Fühlen Sie sich frei mein böser Prototyp Erweiterung zu verwenden.}}