Tắt tính năng tự động hoàn thành qua CSS

Có thể sử dụng CSS để tắt tính năng tự động hoàn thành trên một phần tử biểu mẫu (cụ thể là trường văn bản) không?

Tôi sử dụng thư viện thẻ không cho phép phần tử tự động hoàn thành và tôi muốn tắt tính năng tự động hoàn thành mà không sử dụng Javascript.

Bạn có thể sử dụng được tạo idvà namemọi lúc, khác nhau, vì vậy trình duyệt không thể nhớ trường văn bản này và sẽ không đề xuất một số giá trị.

Đây ít nhất là giải pháp thay thế an toàn cho nhiều trình duyệt, nhưng tôi khuyên bạn nên đi với câu trả lời từ RobertsonM ( autocomplete="off").

Như thường lệ, không có thuộc tính "autocomplete off" trong CSS. Tuy nhiên, html có một mã dễ dàng cho việc này:

<input type="text" id="foo" value="bar" autocomplete="off" />

Nếu bạn đang tìm kiếm một effector trên toàn trang web, một cách dễ dàng là chỉ cần có một hàm js để chạy qua tất cả các 'đầu vào' và thêm thẻ này hoặc tìm kiếm lớp / id css tương ứng.

Thuộc tính tự động hoàn thành hoạt động tốt trong Chrome và Firefox (!), Nhưng hãy xem thêm Có cách hợp lệ nào của W3C để tắt tính năng tự động hoàn thành trong biểu mẫu HTML không?

bạn có thể dễ dàng thực hiện bằng jQuery

$('input').attr('autocomplete','off');

Nếu bạn đang sử dụng, formbạn có thể tắt tất cả các tự động hoàn thành với,

<form id="Form1" runat="server" autocomplete="off">

CSS không có khả năng này. Bạn sẽ cần sử dụng kịch bản phía máy khách.

Tôi đã thử tất cả các cách được đề xuất từ ​​câu trả lời câu hỏi này và các bài viết khác trên web nhưng vẫn không hoạt động. Tôi đã thử autocomplete = "new-random-value", autocomplete = "off" trong phần tử biểu mẫu, sử dụng tập lệnh phía máy khách như bên dưới nhưng bên ngoài $ (document) .ready () với tư cách là một trong những người dùng được đề cập:

$(':input').on('focus', function () {
  $(this).attr('autocomplete', 'off')
});

Tôi thấy có thể một ưu tiên khác trong trình duyệt gây ra hành vi kỳ lạ này! Vì vậy, tôi đã tìm kiếm nhiều hơn và cuối cùng, tôi đọc lại cẩn thận những dòng dưới đây từ bài báo hay này :

Vì lý do này, nhiều trình duyệt hiện đại không hỗ trợ autocomplete = "off" cho các trường đăng nhập:

Nếu một trang web đặt autocomplete = "off" cho a và biểu mẫu bao gồm các trường nhập tên người dùng và mật khẩu, thì trình duyệt sẽ vẫn đề nghị ghi nhớ thông tin đăng nhập này và nếu người dùng đồng ý, trình duyệt sẽ tự động điền các trường đó vào lần tiếp theo người dùng truy cập trang. Nếu một trang web đặt autocomplete = "off" cho các trường tên người dùng và mật khẩu, thì trình duyệt sẽ vẫn đề nghị ghi nhớ thông tin đăng nhập này và nếu người dùng đồng ý, trình duyệt sẽ tự động điền các trường đó vào lần tiếp theo người dùng truy cập trang. Đây là hành vi trong Firefox (kể từ phiên bản 38), Google Chrome (kể từ 34) và Internet Explorer (kể từ phiên bản 11).

Nếu bạn đang xác định trang quản lý người dùng nơi người dùng có thể chỉ định mật khẩu mới cho người khác và do đó bạn muốn ngăn việc tự động điền các trường mật khẩu, bạn có thể sử dụng autocomplete = "new-password" ; tuy nhiên, hỗ trợ cho giá trị này chưa được triển khai trên Firefox.

Nó chỉ hoạt động. Tôi đã thử trong chrome đặc biệt và tôi hy vọng điều này tiếp tục hoạt động và giúp ích cho những người khác.

Tôi đã giải quyết vấn đề bằng cách thêm tên tự động hoàn thành giả cho tất cả các đầu vào.

$("input").attr("autocomplete", "fake-name-disable-autofill");

Nhờ giải pháp của @ ahhmarr, tôi đã có thể giải quyết vấn đề tương tự trong Angular + ui-router của mình môi trường , tôi sẽ chia sẻ ở đây cho những ai quan tâm.

Trong của tôi, index.htmltôi đã thêm tập lệnh sau:

<script type="text/javascript">
    setTimeout(function() {
        $('input').attr('autocomplete', 'off');
    }, 2000);
</script>

Sau đó, để bao gồm các thay đổi trạng thái, tôi đã thêm phần sau vào bộ điều khiển gốc của mình:

$rootScope.$on('$stateChangeStart', function() {
                $timeout(function () {
                    $('input').attr('autocomplete', 'off');
                }, 2000);
            });

Thời gian chờ dành cho html để hiển thị trước khi áp dụng jquery.

Nếu bạn tìm thấy một giải pháp tốt hơn, xin vui lòng cho tôi biết.

Bạn không thể sử dụng CSS để tắt tính năng tự động hoàn thành, nhưng bạn có thể sử dụng HTML:

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

Về mặt kỹ thuật, bạn có thể thay thế falsebằng bất kỳ giá trị không hợp lệ nào và nó sẽ hoạt động. IOS này là giải pháp duy nhất mà tôi đã tìm thấy cũng hoạt động trong Edge.

Có 3 cách để làm điều đó, tôi đề cập đến chúng theo thứ tự là cách tốt hơn ...

Cách 1-HTML:

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

Cách 2-Javascript:

document.getElementById("input-id").getAttribute("autocomplete") = "off";

3-jQuery cách:

$('input').attr('autocomplete','off');

Tôi chỉ sử dụng 'new-password'thay thế 'off'trên tự động hoàn thành.

và tôi cũng đã thử sử dụng mã này và hoạt động (ít nhất là về phía tôi), tôi sử dụng WP và GravityForm để biết thông tin của bạn

$('input').attr('autocomplete','new-password');

$('input').attr('autocomplete','off');