Tự động hoàn thành của Google không được kích hoạt bằng cách dán bằng chuột

Question

Các Google autocomplete API dường như không hoạt động bằng cách dán nội dung vào đầu vào văn bản bằng chuột. Nó hoạt động tốt nếu liên quan đến bàn phím ở tất cả, nhưng không chỉ với con chuột. Tuy nhiên, tôi đã thông báo rằng sau khi bạn dán nội dung của mình vào kiểu nhập văn bản, nó sẽ kích hoạt từ hầu hết mọi phím bấm (phím mũi tên phải, phím kết thúc, dấu cách).

Bạn có thể đóng lại ở đây trên trang web autocomplete demo của họ.

Đây có phải là lỗi không? hoặc như được thiết kế? Nếu nó được thiết kế, làm thế nào để áp dụng cách giải quyết? Tôi đã giải quyết vấn đề này cho đến nay, nhưng không có sự kiện nhấn phím mô phỏng nào hoạt động.

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

Answer 1

Dường như điều này không chỉ ảnh hưởng đến menu ngữ cảnh Dán mà còn ảnh hưởng đến Chỉnh sửa | Dán từ thanh trình đơn trình duyệt cũng như chức năng dán iOS. Tôi đã mở một số bug with Google. Bạn có thể muốn "Sao" báo cáo lỗi đó để nắm bắt các cập nhật.

Tôi đã tìm thấy giải pháp thay thế, trong khi một chút hack, có vẻ như khắc phục được sự cố. Nếu bạn lưu trữ giá trị được dán, hãy chuyển tiêu điểm trên một trường khác, đặt giá trị trong trường Tự động hoàn thành và cuối cùng tập trung lại vào trường Tự động điền, mọi thứ hoạt động ít nhiều như mong đợi. Ngoài ra, bạn phải làm điều này trong một cuộc gọi lại setTimeout() - thời gian trễ dường như không quan trọng chút nào, nhưng nếu bạn chỉ làm nội tuyến này, bạn sẽ không thấy kết quả mong đợi.

Dưới đây là một mẫu mã của những gì tôi đang mô tả ở trên:

$("#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); 
}; 

cuối cùng focus() là không bắt buộc, nhưng giao diện người dùng là một chút ít ngạc nhiên hơn nếu bạn chỉ cần bỏ qua tự động đến lĩnh vực tiếp theo.

Answer 2

Giải pháp sau đây có vẻ phù hợp với tôi (giả sử tồn tại trường kết thúc bằng "address_2"). Được thử nghiệm trên IE8, IE9, IE10, Chrome, FF và 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)