Tôi vừa thấy rằng nếu bạn có tên người dùng và mật khẩu đã nhớ cho một trang web, phiên bản Chrome hiện tại sẽ tự động điền tên người dùng / địa chỉ email của bạn vào trường trước bất kỳ type=passwordtrường nào . Nó không quan tâm trường được gọi là gì - chỉ giả sử trường trước khi mật khẩu sẽ là tên người dùng của bạn.
Giải pháp cũ
Chỉ cần sử dụng <form autocomplete="off">và nó sẽ ngăn chặn việc điền trước mật khẩu cũng như bất kỳ loại điền vào trường nào dựa trên các giả định mà trình duyệt có thể đưa ra (thường là sai). Trái ngược với việc sử dụng <input autocomplete="off">dường như bị bỏ qua khá nhiều bởi tính năng tự động điền mật khẩu (trong Chrome, đó là, Firefox tuân theo nó).
Giải pháp cập nhật
Chrome bỏ qua <form autocomplete="off"> . Do đó, cách giải quyết ban đầu của tôi (mà tôi đã xóa) bây giờ là tất cả cơn thịnh nộ.
Chỉ cần tạo một vài trường và làm cho chúng bị ẩn bằng "display: none". Thí dụ:
<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
Sau đó đặt các lĩnh vực thực sự của bạn bên dưới.
Hãy nhớ thêm nhận xét hoặc những người khác trong nhóm của bạn sẽ tự hỏi bạn đang làm gì!
Cập nhật tháng 3 năm 2016
Chỉ cần thử nghiệm với Chrome mới nhất - tất cả đều tốt. Đây là một câu trả lời khá cũ bây giờ nhưng tôi muốn chỉ đề cập rằng nhóm của chúng tôi đã sử dụng nó trong nhiều năm nay cho hàng chục dự án. Nó vẫn hoạt động tuyệt vời mặc dù một vài bình luận dưới đây. Không có vấn đề với khả năng truy cập vì các trường có display:nonenghĩa là chúng không tập trung. Như tôi đã đề cập, bạn cần đặt chúng trước các lĩnh vực thực sự của bạn.
Nếu bạn đang sử dụng javascript để sửa đổi biểu mẫu của mình, bạn sẽ cần thêm một mẹo nữa. Hiển thị các trường giả trong khi bạn đang thao tác biểu mẫu và sau đó ẩn chúng lại một phần nghìn giây sau.
Mã ví dụ sử dụng jQuery (giả sử bạn cung cấp cho các trường giả của bạn một lớp):
$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
},1);
Cập nhật tháng 7 năm 2018
Giải pháp của tôi không còn hoạt động tốt nữa vì các chuyên gia chống sử dụng của Chrome đã rất nỗ lực. Nhưng họ đã ném cho chúng tôi một cục xương dưới dạng:
<input type="password" name="whatever" autocomplete="new-password" />
Điều này hoạt động và chủ yếu giải quyết vấn đề.
Tuy nhiên, nó không hoạt động khi bạn không có trường mật khẩu mà chỉ có một địa chỉ email. Điều đó cũng có thể khó khăn để khiến nó ngừng chuyển sang màu vàng và làm sẵn. Giải pháp trường giả có thể được sử dụng để khắc phục điều này.
Trong thực tế, đôi khi bạn cần thả vào hai lĩnh vực giả và thử chúng ở những nơi khác nhau. Ví dụ: tôi đã có các trường giả ở đầu biểu mẫu của mình, nhưng Chrome gần đây đã bắt đầu điền lại trường 'Email' của mình - vì vậy, tôi đã nhân đôi và đưa vào các trường giả mạo hơn ngay trước trường 'Email' và điều đó đã sửa nó . Loại bỏ lô thứ nhất hoặc thứ hai của trường trở lại tự động điền quá nhiệt không chính xác.
Cập nhật tháng 3 năm 2020
Không rõ liệu và khi nào giải pháp này vẫn hoạt động. Nó dường như vẫn hoạt động đôi khi nhưng không phải tất cả thời gian.
Trong các ý kiến dưới đây, bạn sẽ tìm thấy một vài gợi ý. Một cái vừa được thêm bởi @anilyeni có thể đáng để điều tra thêm:
Như tôi nhận thấy, autocomplete="off"hoạt động trên Chrome 80, NẾU có ít hơn 3 yếu tố <form>. Tôi không biết logic là gì hoặc tài liệu liên quan về nó ở đâu.
Ngoài ra cái này từ @dubrox có thể có liên quan, mặc dù tôi chưa thử nó:
cảm ơn rất nhiều về mánh khóe, nhưng xin vui lòng cập nhật câu trả lời, vì display:none;không còn hoạt động nữa, nhưng position: fixed;top:-100px;left:-100px; width:5px;:)
Cập nhật THÁNG 4 NĂM 2020
Giá trị đặc biệt cho chrome cho thuộc tính này đang thực hiện công việc: (được thử nghiệm trên đầu vào - nhưng không phải bởi tôi)
autocomplete="chrome-off"
