Có cách nào hợp lệ để W3C vô hiệu hóa tự động hoàn thành ở dạng HTML không?

424

Khi sử dụng loại tài liệu xhtml1-transitional.dtd, hãy thu thập số thẻ tín dụng bằng HTML sau

<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>

sẽ gắn cờ cảnh báo trên trình xác nhận W3C:

không có thuộc tính "tự động hoàn thành".

Có cách nào W3C / tiêu chuẩn để vô hiệu hóa tự động hoàn thành trình duyệt trên các trường nhạy cảm trong một biểu mẫu không?

html  standards  forms  w3c 
— mờ b
nguồn
10
Bạn có chắc chắn rằng việc làm rối với cài đặt tự động hoàn thành của người dùng là điều bạn muốn làm không? Nếu họ bật nó lên, họ có thể thích nó. Tự động hoàn tất là một tính năng hoàn toàn ở phía trình duyệt, giống như nút cho phép người dùng thay đổi kích thước phông chữ, v.v. Bạn không nên can thiệp vào mong muốn của họ
— rmeador 24/2/2016
113
Ngay cả đối với một cái gì đó nhạy cảm như số thẻ tín dụng? Tôi không thể nghĩ về rất nhiều người muốn ghi nhớ điều đó - đặc biệt là khi tự động hoàn tất được bật theo mặc định trong hầu hết các trình duyệt. Nếu họ muốn nó nhớ điều đó tệ, họ có thể sử dụng thứ gì đó điền vào các biểu mẫu như thanh công cụ của Google.
— matt b
13
Trường hợp sử dụng của tôi hơi khác một chút - Tôi đang tự động hoàn thành và tôi không muốn nó đụng độ với trình duyệt. Tôi chỉ phát hiện ra rằng autocomplete = "off" là không hợp lệ, nhưng có vẻ như không có giải pháp đơn giản nào khác (tiêm nó với js chỉ là ngớ ngẩn)
— thepeer 11/210
13
@rmeador bởi vì đôi khi chúng tôi muốn cung cấp một lựa chọn thân thiện hơn với hộp gợi ý tự động tiêu chuẩn. @corydoras xin vui lòng không đẩy trọng lượng OSX của bạn xung quanh, nó không hữu ích cho việc giải quyết câu hỏi này.
— Josh M.
12
Vấn đề là các ngân hàng sẽ buộc thương nhân phải chịu trách nhiệm nếu một giao dịch gian lận diễn ra ... ngay cả khi đó là lỗi của khách hàng ở mức 100%. Do đó, trong một số trường hợp, việc vô hiệu hóa tính năng cho khách hàng là hợp pháp.
— Alexandre H. Tremblay

Câu trả lời:

421

Đây là một bài viết hay từ MDC giải thích các vấn đề (và giải pháp) để hình thành tự động hoàn thành. Microsoft cũng đã xuất bản một cái gì đó tương tự ở đây .

Thành thật mà nói, nếu đây là điều gì đó quan trọng đối với người dùng của bạn, thì việc phá vỡ các tiêu chuẩn theo cách này có vẻ phù hợp. Ví dụ: Amazon sử dụng thuộc tính 'tự động hoàn thành' khá nhiều và dường như nó hoạt động tốt.

Nếu bạn muốn xóa hoàn toàn cảnh báo, bạn có thể sử dụng JavaScript để áp dụng thuộc tính cho các trình duyệt hỗ trợ nó (IE và Firefox là các trình duyệt quan trọng) bằng cách sử dụng someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

Cuối cùng, nếu trang web của bạn đang sử dụng HTTPS, IE sẽ tự động tắt tự động hoàn thành (cũng như một số trình duyệt khác, theo như tôi biết).

Cập nhật

Vì câu trả lời này vẫn nhận được khá nhiều upvote, tôi chỉ muốn chỉ ra rằng trong HTML5, bạn có thể sử dụng thuộc tính 'tự động hoàn thành' trên thành phần biểu mẫu của bạn. Xem tài liệu về W3C cho nó.

— Nick Presta
nguồn
41
Có vẻ như Firefox không tắt tự động hoàn thành trên https, nhưng đó là một kiến ​​thức hữu ích. Cảm ơn!
— matt b
3
Safari không tôn trọng thuộc tính autocomplete = "off". Xem stackoverflow.com/questions/22817801/
— Mạnh
1
autocompletecó thể được sử dụng không chỉ trên formphần tử và offgiá trị hoạt động ít nhất trongchromium-40.0.2214.115
— x-yuri
W3c dường như đang mở rộng các tiêu chuẩn cho tự động hoàn thành trong HTML5.1 (trong bản nháp theo nhận xét này) w3c.github.io/html/ trộm
— Justin Nafe
1
Nếu không có gì hoạt động, hãy sử dụng textarea thay vì hộp văn bản để tắt tự động hoàn tất.
— Bsienn
64

Tôi sẽ rất ngạc nhiên nếu W3C sẽ đề xuất một cách hoạt động với (X) HTML4. Tính năng tự động hoàn thành hoàn toàn dựa trên trình duyệt và được giới thiệu trong những năm qua (ngay sau khi tiêu chuẩn HTML4 được viết).

Tuy nhiên, sẽ không ngạc nhiên nếu HTML5 sẽ có một cái.

Chỉnh sửa: Như tôi đã nghĩ, HTML5 không phải là tính năng. Để xác định trang của bạn là HTML5, hãy sử dụng loại tài liệu sau (nghĩa là: đặt trang này làm văn bản đầu tiên trong mã nguồn của bạn). Lưu ý rằng không phải tất cả các trình duyệt đều hỗ trợ tiêu chuẩn này, vì nó vẫn ở dạng bản nháp.

<!DOCTYPE html>
— Henrik Paul
nguồn
7
Tất cả các trình duyệt mong đợi các phiên bản cũ hơn của Konqueror hỗ trợ nó. Ngay cả IE6 cũng hỗ trợ nó. Đó là loại tài liệu để đi.
— BalusC
56

HTML 4 : Không

HTML 5 : Có

Thuộc tính tự động hoàn thành là một thuộc tính liệt kê. Thuộc tính có hai trạng thái. Các trên bản đồ từ khóa để về nhà nước, và tắt bản đồ từ khóa sang trạng thái tắt. Thuộc tính cũng có thể được bỏ qua. Giá trị mặc định giá trị còn thiếu là về nhà nước. Các khỏi trạng thái chỉ ra rằng theo mặc định, hình thức kiểm soát theo hình thức sẽ có một tập tên trường tự động điền của họ để tắt ; trạng thái bật cho biết theo mặc định, các điều khiển biểu mẫu trong biểu mẫu sẽ có autofilltên trường được đặt thành "bật".

Tham khảo: W3

— RuudKok
nguồn
@ fre Breed.tk Vâng, nó rõ ràng hơn tất cả những người khác. Vấn đề đơn giản.
— OverCoder
32

Không, nhưng tự động hoàn tất trình duyệt thường được kích hoạt bởi trường có cùng namethuộc tính với các trường đã được điền trước đó. Nếu bạn có thể tạo ra một cách thông minh để có một tên trường ngẫu nhiên , tự động hoàn thành sẽ không thể lấy bất kỳ giá trị nào được nhập trước đó cho trường.

Nếu bạn đặt cho trường đầu vào một tên như " email_<?= randomNumber() ?>", và sau đó có tập lệnh nhận vòng lặp dữ liệu này thông qua các biến POST hoặc GET để tìm thứ gì đó khớp với mẫu " email_[some number]", bạn có thể loại bỏ nó và điều này sẽ có ( thực tế) đảm bảo thành công, bất kể trình duyệt .

— Phantom Watson
nguồn
6
Điều này sẽ làm cho việc kiểm tra tự động khó hơn.
— David Waters
14
Sẽ làm cho việc kiểm tra tự động khó hơn, chỉ khi phần mềm kiểm tra của bạn không thể kiểm tra / đọc các trường có thể có số ngẫu nhiên được thêm vào chúng. Có thể là thời gian để nâng cấp phần mềm kiểm tra tự động của bạn.
— corydoras
8
Thông tin tự động hoàn tất vẫn sẽ được lưu trong thư mục dữ liệu của trình duyệt, phải không?
— Joey Adams
2
Có lẽ. Nhưng nó sẽ không bao giờ thực sự xuất hiện trở lại với người dùng.
— Phantom Watson
1
Chrome hiện sử dụng thuộc tính type = "password" thay vì thuộc tính name cho một trang web cụ thể. Tôi có tên = "newpassword" autocomplete = 'off' type = "password" và nó được tự động điền! Nếu tôi thay đổi loại, không có tự động điền
— Enigma Plus
31

Không, một bài viết hay ở đây trong Mozila Wiki .

Tôi sẽ tiếp tục sử dụng không hợp lệ attribute. Tôi nghĩ rằng đây là nơi chủ nghĩa thực dụng nên giành chiến thắng trong việc xác nhận.

— David Waters
nguồn
23

Làm thế nào về việc thiết lập nó với JavaScript?

var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false

Nó không hoàn hảo, nhưng HTML của bạn sẽ hợp lệ.

— Greg
nguồn
8
Sử dụng javascript như một cách giải quyết cho các lỗi xác thực cũng giống như quét bụi dưới tấm thảm. Mặc dù tài liệu HTML có thể trở nên hợp lệ, trang HTML + JS kết quả sẽ không như vậy.
— fregante
11

Nếu bạn sử dụng jQuery, bạn có thể làm một cái gì đó như thế:

$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});

và sử dụng lớp autocomplete Offer nơi bạn muốn:

<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />

Nếu bạn muốn TẤT CẢ đầu vào của mình autocomplete=off, bạn chỉ cần sử dụng:

$(document).ready(function(){$("input").attr("autocomplete","off");});
— Totoche
nguồn
4
Chỉ cần sử dụng HTML5 doctype là dễ dàng và tốt hơn.
— BalusC
5
Dù sao đây cũng không phải là html thực sự hợp lệ, nó chỉ đặt autocompletethuộc tính (không hợp lệ) theo một cách khác với html
— matt b
Mã này không hoạt động đối với tôi; Tôi đã sử dụng $('input.autocompleteOff').val('');mà dường như là ổn.
— dqd
5
Sử dụng javascript như một cách giải quyết cho các lỗi xác thực cũng giống như quét bụi dưới tấm thảm. Mặc dù tài liệu HTML có thể trở nên hợp lệ, trang HTML + JS kết quả sẽ không như vậy.
— fregante
8

Một cách khác - cũng sẽ giúp bảo mật là gọi hộp đầu vào một cái gì đó khác nhau mỗi khi bạn hiển thị nó: giống như một captha. Bằng cách đó, phiên có thể đọc đầu vào chỉ một lần và Tự động hoàn thành không có gì để tiếp tục.

Chỉ là một điểm liên quan đến câu hỏi của rmeador về việc bạn có nên can thiệp vào trải nghiệm trình duyệt hay không: Chúng tôi phát triển hệ thống Quản lý & CRM liên hệ và khi bạn nhập dữ liệu của người khác vào một hình thức bạn không muốn nó liên tục đề xuất chi tiết của riêng bạn.

Điều này hoạt động cho nhu cầu của chúng tôi, nhưng sau đó chúng tôi có thể nói với người dùng để có được một trình duyệt phong nha :)

autocomplete='off'
— Enigma Plus
nguồn
8

autocomplete="off" điều này sẽ khắc phục vấn đề cho tất cả các trình duyệt hiện đại.

<form name="form1" id="form1" method="post" autocomplete="off"
   action="http://www.example.com/form.cgi">
  [...]
</form>

Trong các phiên bản hiện tại của trình duyệt Gecko, thuộc tính tự động hoàn thành hoạt động hoàn hảo. Đối với các phiên bản trước, quay lại Netscape 6.2, nó đã hoạt động với ngoại lệ cho các biểu mẫu có "Địa chỉ" và "Tên"

Cập nhật

Trong một số trường hợp, trình duyệt sẽ tiếp tục đề xuất các giá trị tự động hoàn thành ngay cả khi thuộc tính tự động hoàn thành được đặt thành tắt. Hành vi bất ngờ này có thể khá khó hiểu cho các nhà phát triển. Mẹo để thực sự buộc không tự động hoàn thành là gán một chuỗi ngẫu nhiên cho thuộc tính , ví dụ:

autocomplete="nope"

Vì giá trị ngẫu nhiên này không phải là a valid one, trình duyệt sẽ bỏ cuộc.

Tài liệu

— Emilio Gort
nguồn
Các trình duyệt hiện đại không tôn trọng tự động hoàn thành = tắt theo lựa chọn. :/ Không may.
— Alexus
@Alexus đã thêm một số cập nhật ... thay đổi internet rất nhanh
— Emilio Gort
6

Sử dụng một thuộc tính 'tên' ngẫu nhiên làm việc cho tôi.

Tôi đặt lại thuộc tính name khi gửi biểu mẫu để bạn vẫn có thể truy cập nó theo tên khi biểu mẫu được gửi. (sử dụng thuộc tính id để lưu trữ tên)

— opznhaarlem
nguồn
5

Lưu ý rằng có một số nhầm lẫn về vị trí của thuộc tính tự động hoàn thành. Nó có thể được áp dụng cho toàn bộ thẻ FORM hoặc cho các thẻ INPUT riêng lẻ và điều này không thực sự được chuẩn hóa trước HTML5 (điều đó cho phép rõ ràng cả hai vị trí ). Các tài liệu cũ đáng chú ý nhất là bài viết Mozilla này chỉ đề cập đến thẻ FORM. Đồng thời, một số máy quét bảo mật sẽ chỉ tìm kiếm tự động hoàn thành trong thẻ INPUT và khiếu nại nếu nó bị thiếu (ngay cả khi nó nằm trong MẪU mẹ). Một phân tích chi tiết hơn về mớ hỗn độn này được đăng ở đây: Nhầm lẫn các thuộc tính AUTOCOMPLETE = OFF trong các biểu mẫu HTML .

— kravietz
nguồn
3

Không lý tưởng, nhưng bạn có thể thay đổi id và tên của hộp văn bản mỗi khi bạn kết xuất nó - bạn cũng phải theo dõi phía máy chủ để bạn có thể lấy dữ liệu ra.

Không chắc điều này có hiệu quả hay không, chỉ là một ý nghĩ.

— Kieron
nguồn
2

Tôi nghĩ rằng có một cách đơn giản hơn. Tạo một đầu vào ẩn với một tên ngẫu nhiên (thông qua javascript) và đặt tên người dùng thành đó. Lặp lại với mật khẩu. Bằng cách này, tập lệnh phụ trợ của bạn biết chính xác tên trường thích hợp là gì, trong khi vẫn tự động hoàn thành trong bóng tối.

Tôi có thể sai, nhưng đó chỉ là một ý tưởng.

— Rắn và cà phê
nguồn
2 
if (document.getElementsByTagName) {
    var inputElements = document.getElementsByTagName("input");
    for (i=0; inputElements[i]; i++) {
        if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
            inputElements[i].setAttribute("autocomplete","off");
        }
    }
}
— Jack Tuck
nguồn
-1

Giải pháp này hoạt động với tôi:

$('form,input,select,textarea').attr("autocomplete", "nope");

nếu bạn muốn sử dụng tự động điền trong khu vực này: thêm autocomplete="false"vào phần tử ex:

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
— Hưng Trịnh
nguồn
-5

Tự động hoàn thành hợp lệ tắt

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>
— Thiết kế web Southampton
nguồn
13
chắc chắn nếu một người dùng đã tắt JS, họ không thể hoàn thành một đơn đặt hàng vì họ không thể nhập số thẻ của họ? Tốt hơn là bổ sung thuộc tính thông qua JS tôi nói - trường hợp xấu nhất, JS tắt cung cấp cho trường số thẻ có khả năng tự động hoàn thành, nhưng ít nhất họ có thể đặt hàng ... chỉ là một suy nghĩ :)
— Terry_Brown
3
Điều này thậm chí không buồn cười.
— Ricardo Pieper
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.