Googles Autocomplete wird nicht durch Einfügen mit der Maus aktiviert

Question

Die Google autocomplete API scheint nicht zu aktivieren, indem Inhalt in eine Texteingabe mit der Maus eingefügt wird. Es funktioniert gut, wenn die Tastatur überhaupt beteiligt ist, aber nicht mit nur der Maus.

Ich habe jedoch bemerkt, dass, nachdem Sie Ihren Inhalt in die Texteingabe einfügen, es von fast jedem Tastendruck (getestete Rechtspfeiltaste, Ende-Taste, Leerzeichen) aktiviert wird.

Sie können es hier auf ihrer autocomplete demo Website repro.

Ist das ein Fehler? oder wie entworfen? Wenn es wie vorgesehen ist, wie kann man Abhilfe schaffen? Ich habe dies bisher als Workaround, aber keine simulierten Tastenereignisse scheinen zu funktionieren.

$('.txtLocation').bind("paste", function (e) 
{ 
    $('.txtLocation').focus(); 
    var e = jQuery.Event("keydown"); 
    e.keyCode = 39; //39=Arrow Right 
    $('.txtLocation').trigger(e); 
}); 

Answer 1

Es scheint, diese Auswirkungen nicht nur das Kontextmenü Einfügen, sondern auch der von Bearbeiten | Einfügen aus dem auch Menüleiste Browser als iOS Paste-Funktionalität. Ich habe eine bug with Google geöffnet. Vielleicht möchten Sie diesen Bug-Report "startern", um Updates abzufangen.

Ich fand eine Abhilfe, die, während ein bisschen ein Hack, scheint das Problem zu beheben. Wenn Sie den eingefügten Wert speichern, wechseln Sie den Fokus auf ein anderes Feld, legen Sie den Wert im Feld "Autocomplete" fest und konzentrieren Sie sich schließlich wieder auf das Feld "Autocomplete", was mehr oder weniger wie erwartet funktioniert. Sie müssen dies auch in einem setTimeout() Callback tun - die Verzögerungszeit scheint überhaupt keine Rolle zu spielen, aber wenn Sie dies nur inline tun, werden Sie nicht die erwarteten Ergebnisse sehen.

Hier ist ein Beispiel für den Code, was ich beschreibe oben:

$("#address_field").on("paste", googleMapsAutocompletePasteBugFix); 

googleMapsAutocompletePasteBugFix = function() { 
    return setTimeout(function() { 
     var field, val; 
     field = $("#address_field"); 
     val = field.val(); 
     $("#price").focus(); 
     field.val(val); 
     return field.focus(); 
    }, 1); 
}; 

Die letzten focus() optional ist, aber die UI ist etwas weniger überraschend, als wenn Sie nur automatisch zum nächsten Feld übersprungen.

Answer 2

Folgende Lösung scheint für mich zu funktionieren (Existenz von Feld endet mit "address_2" wird angenommen). Getestet auf IE8, IE9, IE10, Chrome, FF und Safari.

if document.addEventListener 
     $(document).on("paste", "[name*=address_1]", @googleMapsAutocompletePasteBugFix) 
     $(document).on("onpaste", "[name*=address_1]", @googleMapsAutocompletePasteBugFix) 
    else 
     for element in $("input[name*=address_1]") 
     document.getElementById($(element).attr('id')).onpaste = @googleMapsAutocompletePasteBugFix 

    googleMapsAutocompletePasteBugFix: (e) -> 
    unless e 
     e = window.event 

    if e.srcElement 
     target = e.srcElement 
    else 
     target = e.target 

    field = $(target) 
    fieldId = field.attr('id') 
    focusSwitchFieldId = fieldId.replace(/(\d)$/, '2') 

    setTimeout(-> 
     if window.chrome || /Safari/.test(navigator.userAgent) 
     val = field.val() 
     $("##{focusSwitchFieldId}").focus() 
     field.val(val) 
     field.focus() 
     else 
     field = document.getElementById(fieldId) 
     val = field.value 
     document.getElementById(focusSwitchFieldId).focus() 
     setTimeout(-> 
      field.value = val 
      field.focus() 
      field.focus() 
     , 50) 
    , 10)