Phát hiện khi tự động điền đã được lấp đầy

Question

Sau một cuộc đấu tranh lâu dài, cuối cùng tôi đã phát hiện ra cách duy nhất để xóa phong cách tự động điền ở mọi trình duyệt:

$('input').each(function() { 
    var $this = $(this); 

    $this.after($this.clone()).remove(); 
}); 

Vấn đề là, nó không thể được chạy trong load, vì việc tự động điền các trường xảy ra đôi khi sau khi thực tế. Ngay bây giờ tôi đang chạy nó trên một thời gian chờ là 100 mili giây sau khi load:

// Kill autofill styles 
$(window).on({ 
    load: function() { 
     setTimeout(function() { 
      $('.text').each(function() { 
       var $this = $(this); 

       $this.after($this.clone()).remove(); 
      }); 
     }, 100); 
    } 
}); 

và điều đó dường như an toàn trên thậm chí chậm nhất của hệ thống, nhưng nó thực sự không thanh lịch. Có một số loại sự kiện đáng tin cậy hoặc kiểm tra tôi có thể thực hiện để xem liệu tự động điền có hoàn tất không?

EDIT: Đây là tự động điền.

autofill http://dl.dropbox.com/u/2463964/autofill.png

Answer 1

Có một lỗi mở qua tại http://code.google.com/p/chromium/issues/detail?id=46543#c22 về vấn đề này, có vẻ như nó có thể (nên) cuối cùng là có thể chỉ cần viết trên phong cách mặc định với một !important chọn, mà sẽ là giải pháp thanh lịch nhất. Mã này sẽ là một cái gì đó như:

input { 
    background-color: #FFF !important; 
} 

Còn bây giờ mặc dù lỗi này là vẫn còn mở và nó có vẻ như giải pháp hackish của bạn là giải pháp duy nhất cho Chrome, tuy nhiên a) là giải pháp dành cho Chrome không cần setTimeout và b) có vẻ như Firefox có thể tôn trọng cờ !important hoặc một số loại công cụ chọn CSS có mức độ ưu tiên cao như được mô tả trong Override browser form-filling and input highlighting with HTML/CSS. Không giúp đỡ à?

Answer 2

Nếu bạn đang sử dụng Chrome hoặc Safari, bạn có thể sử dụng bộ chọn input:-webkit-autofill CSS để có được các lĩnh vực tự động điền.

đang phát hiện

Ví dụ:

setInterval(function() { 
    var autofilled = document.querySelectorAll('input:-webkit-autofill'); 
    // do something with the elements... 
}, 500); 

Answer 3

Tôi đề nghị bạn tránh tự động điền ở vị trí đầu tiên, thay vì cố gắng để đánh lừa trình duyệt

<form autocomplete="off"> 

Thông tin thêm: http://www.whatwg.org/specs/web-forms/current-work/#the-autocomplete

Nếu bạn muốn giữ hành vi tự động điền nhưng sự thay đổi phong cách, có thể bạn có thể làm một cái gì đó như thế này (jQuery):

$(document).ready(function() { 
    $("input[type='text']").css('background-color', 'white'); 
}); 

Answer 4

$(window).load(function() 
{ 
    if ($('input:-webkit-autofill')) 
    { 
     $('input:-webkit-autofill').each(function() 
     { 
      $(this).replaceWith($(this).clone(true,true)); 
     }); 
     // RE-INITIALIZE VARIABLES HERE IF YOU SET JQUERY OBJECT'S TO VAR FOR FASTER PROCESSING 
    } 
}); 

Tôi nhận thấy rằng giải pháp jQuery bạn đã đăng không sao chép các sự kiện được đính kèm. Phương pháp tôi đã đăng hoạt động cho jQuery 1.5+ và nên là giải pháp ưu tiên vì nó giữ lại các sự kiện được đính kèm cho từng đối tượng. Nếu bạn có một giải pháp để lặp qua tất cả các biến được khởi tạo và khởi tạo lại chúng thì một giải pháp jQuery 100% hoạt động đầy đủ sẽ có sẵn, nếu không bạn phải khởi tạo lại các biến được đặt khi cần thiết.

ví dụ: var foo = $ ('# foo');

thì bạn sẽ phải gọi: foo = $ ('# foo');

vì phần tử gốc đã bị xóa và bản sao hiện tồn tại ở vị trí của nó.