Tắt tính năng Tự động điền của Chrome

620
templaedhel 2013-04-01 19:45.

Tôi đã gặp sự cố với hành vi tự động điền của chrome trên một số biểu mẫu.

Tất cả các trường trong biểu mẫu đều có tên rất phổ biến và chính xác, chẳng hạn như "email", "tên" hoặc "mật khẩu" và chúng cũng đã autocomplete="off"được đặt.

Cờ tự động hoàn thành đã vô hiệu hóa thành công hành vi tự động hoàn thành, trong đó danh sách các giá trị thả xuống xuất hiện khi bạn bắt đầu nhập, nhưng không thay đổi các giá trị mà Chrome tự động điền vào các trường.

Hành vi này sẽ ổn ngoại trừ việc chrome điền không chính xác các đầu vào, chẳng hạn như điền địa chỉ email của điện thoại vào. Khách hàng đã phàn nàn về điều này, vì vậy nó đã được xác minh là xảy ra trong nhiều trường hợp và không phải như một số loại kết quả nào đó mà tôi đã thực hiện cục bộ trên máy của mình.

Giải pháp hiện tại duy nhất mà tôi có thể nghĩ đến là tạo động các tên đầu vào tùy chỉnh và sau đó trích xuất các giá trị trên phần phụ trợ, nhưng điều này có vẻ như là một cách khá khó giải quyết vấn đề này. Có bất kỳ thẻ hoặc câu hỏi nào thay đổi hành vi tự động điền có thể được sử dụng để khắc phục điều này không?

30 answers

979
tibalt 2015-06-22 23:18.

CHỈNH SỬA Tháng 9 năm 2020 : autocomplete="chrome-off"tắt tính năng tự động điền của Chrome. Câu trả lời gốc bên dưới.

Câu trả lời ban đầu

Đối với các phiên bản Chrome mới, bạn chỉ cần autocomplete="new-password"nhập trường mật khẩu của mình và thế là xong. Tôi đã kiểm tra nó, hoạt động tốt.

Nhận được mẹo đó từ nhà phát triển Chrome trong cuộc thảo luận này: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

Tái bút Lưu ý rằng Chrome sẽ cố gắng suy ra hành vi tự động điền từ tên, id và bất kỳ nội dung văn bản nào mà Chrome có thể nhận được xung quanh trường bao gồm nhãn và các nút văn bản tùy ý. Nếu có mã thông báo tự động điền như street-addresstrong ngữ cảnh, Chrome sẽ tự động điền mã thông báo đó. Heuristic có thể khá khó hiểu vì nó đôi khi chỉ kích hoạt nếu có các trường bổ sung trong biểu mẫu hoặc không nếu có quá ít trường trong biểu mẫu. Cũng lưu ý rằng autocomplete="no"sẽ có vẻ hoạt động nhưng autocomplete="off"sẽ không hoạt động vì lý do lịch sử. autocomplete="no"là bạn nói với trình duyệt rằng trường này sẽ được tự động hoàn thành dưới dạng một trường được gọi "no". Nếu bạn tạo các autocompletetên ngẫu nhiên duy nhất, bạn sẽ tắt tính năng tự động hoàn thành.

Nếu người dùng của bạn đã truy cập các biểu mẫu xấu, thông tin tự động điền của họ có thể bị hỏng . Yêu cầu họ truy cập thủ công và sửa thông tin tự động điền của họ trong Chrome có thể là hành động cần thiết mà họ phải thực hiện.

744
mike nelson 2013-04-10 18:54.

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ỉ cần 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ó ngăn chặn việc điền trước mật khẩu cũng như bất kỳ loại điền kinh nghiệm nào vào các trường 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">có vẻ như bị bỏ qua khá nhiều bởi tính năng tự động điền mật khẩu (trong Chrome, Firefox tuân theo điều đó).

Giải pháp cập nhật

Chrome hiện bỏ qua <form autocomplete="off">. Do đó, giải pháp ban đầu của tôi (mà tôi đã xóa) bây giờ là tất cả các cơn thịnh nộ.

Chỉ cần tạo một vài trường và ẩn chúng 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 trường thực của bạn bên dưới.

Hãy nhớ thêm nhận xét nếu không những người khác trong nhóm của bạn sẽ thắc mắc bạn đang làm gì!

Cập nhật tháng 3 năm 2016

Vừa được 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ũ 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 cho hàng chục dự án. Nó vẫn hoạt động tốt mặc dù có một vài bình luận bên dưới. 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 trường thực 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 một thủ thuật bổ sung. 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 mình 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 khả năng sử dụng của Chrome đã làm việc chăm chỉ. Nhưng họ đã ném cho chúng ta một khú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 được 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ó địa chỉ email. Điều đó cũng có thể khó làm cho nó ngừng chuyển sang màu vàng và đổ đầy sơ bộ. Giải pháp trường giả có thể được sử dụng để khắc phục điều này.

Trên thực tế, đôi khi bạn cần phải thả vào hai trường giả và thử chúng ở những nơi khác nhau. Ví dụ: tôi đã có các trường giả mạo ở đầ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 tôi - vì vậy, sau đó tôi đã nhân đôi và đặt thêm các trường giả mạo ngay trước trường 'Email' và điều đó đã sửa nó . Việc xóa lô đầu tiên hoặc lô thứ hai của trường sẽ chuyển thành tính năng tự động điền quá liều lượng không chính xác.

Cập nhật tháng 3 năm 2020

Không rõ nế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 mọi lúc.

Trong phần bình luận bên dưới, bạn sẽ tìm thấy một vài gợi ý. Một cái vừa được @anilyeni thêm vào 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 phần tử trong <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 kiểm tra nó:

cảm ơn rất nhiều vì thủ thuật, nhưng vui lòng cập nhật câu trả lời, vì display:none;nó không hoạt động nữa, nhưng position: fixed;top:-100px;left:-100px; width:5px;có :)

Cập nhật tháng 4 năm 2020

Giá trị đặc biệt của chrome cho thuộc tính này đang thực hiện công việc: (được kiểm tra trên đầu vào - nhưng không phải bởi tôi) autocomplete="chrome-off"

270
Fery Kaszoni 2015-04-12 09:57.

Sau nhiều tháng vật lộn, tôi đã thấy rằng giải pháp đơn giản hơn bạn tưởng tượng rất nhiều:

Thay vì autocomplete="off"sử dụng autocomplete="false";)

Đơn giản như vậy, và nó cũng hoạt động như một sự quyến rũ trong Google Chrome!


Bản cập nhật tháng 8 năm 2019 (ghi có cho @JonEdiger trong nhận xét)

Lưu ý: nhiều thông tin trực tuyến cho biết các trình duyệt hiện coi autocomplete = 'false' giống như autocomplete = 'off'. Ít nhất là ngay trong phút này, nó đang ngăn tự động hoàn thành cho ba trình duyệt đó.

Đặt nó ở cấp biểu mẫu và sau đó đối với các đầu vào bạn muốn tắt, hãy đặt thành một số giá trị không hợp lệ như 'none':

<form autocomplete="off"> 
  <input type="text" id="lastName" autocomplete="none"/> 
  <input type="text" id="firstName" autocomplete="none"/>
</form>
125
dsuess 2014-11-15 03:32.

Đôi khi thậm chí autocomplete=offsẽ không ngăn được việc điền thông tin đăng nhập vào các trường sai.

Một cách giải quyết là tắt tính năng tự động điền của trình duyệt bằng chế độ chỉ đọc và đặt có thể ghi trên tiêu điểm:

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

Sự focuskiện xảy ra khi nhấp chuột và tab qua các trường.

Cập nhật:

Mobile Safari đặt con trỏ trong trường, nhưng không hiển thị bàn phím ảo. Cách giải quyết mới này hoạt động giống như trước đây, nhưng xử lý bàn phím ảo:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Bản thử trực tiếp https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Giải thích: Trình duyệt tự động điền thông tin đăng nhập vào trường văn bản sai?

điền các đầu vào không chính xác, chẳng hạn như điền đầu vào điện thoại bằng địa chỉ email

Đôi khi tôi nhận thấy hành vi kỳ lạ này trên Chrome và Safari, khi có các trường mật khẩu ở cùng một dạng. Tôi đoán, trình duyệt tìm kiếm trường mật khẩu để chèn thông tin đăng nhập đã lưu của bạn. Sau đó, nó tự động điền tên người dùng vào trường textlike-input gần nhất, xuất hiện trước trường mật khẩu trong DOM (chỉ đoán do quan sát). Vì trình duyệt là phiên bản cuối cùng và bạn không thể kiểm soát nó,

Bản sửa lỗi chỉ đọc này đã làm việc cho tôi.

89
dana 2016-02-26 12:30.

Nếu bạn đang triển khai tính năng hộp tìm kiếm, hãy thử đặt typethuộc tính searchnhư sau:

<input type="search" autocomplete="off" />

Điều này đang hoạt động đối với tôi trên Chrome v48 và có vẻ là đánh dấu hợp pháp:

https://www.w3.org/wiki/HTML/Elements/input/search

65
Jobin 2014-05-14 19:13.

Thử cái này. Tôi biết câu hỏi này hơi cũ, nhưng đây là một cách tiếp cận khác cho vấn đề.

Tôi cũng nhận thấy vấn đề đến ngay phía trên passwordlĩnh vực này.

Tôi đã thử cả hai phương pháp như

<form autocomplete="off"><input autocomplete="off">nhưng không ai trong số họ làm việc cho tôi.

Vì vậy, tôi đã sửa nó bằng cách sử dụng đoạn mã bên dưới - chỉ cần thêm một trường văn bản khác ngay phía trên trường loại mật khẩu và tạo nó display:none.

Một cái gì đó như thế này:

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

Hy vọng nó sẽ giúp ích cho ai đó.

54
Tauras 2016-04-13 12:05.

Tôi không biết tại sao, nhưng điều này đã giúp ích và hiệu quả cho tôi.

<input type="password" name="pwd" autocomplete="new-password">

Tôi không biết tại sao, nhưng autocomplete = "new-password" vô hiệu hóa tính năng tự động điền. Nó hoạt động trong phiên bản chrome 49.0.2623.112 mới nhất .

47
Kuf 2016-09-03 21:00.

Đối với tôi, đơn giản

<form autocomplete="off" role="presentation">

Đã làm nó.

Đã thử nghiệm trên nhiều phiên bản, lần thử cuối cùng là 56.0.2924.87

27
Hitesh Kalwani 2016-10-22 04:12.

Bạn phải thêm thuộc tính này:

autocomplete="new-password"

Liên kết nguồn: Bài báo đầy đủ

20
Fareed Alnamrouti 2016-03-16 22:24.

Nó rất đơn giản và khó khăn :)

google chrome về cơ bản tìm kiếm mọi phần tử mật khẩu có thể nhìn thấy đầu tiên bên trong <form>, <body><iframe>thẻ để kích hoạt tính năng tự động nạp tiền cho họ, vì vậy để vô hiệu hóa này, bạn cần phải thêm một yếu tố mật khẩu giả như sau:

    • nếu phần tử mật khẩu của bạn bên trong <form>thẻ, bạn cần đặt phần tử giả làm phần tử đầu tiên trong biểu mẫu của bạn ngay sau <form>thẻ mở

    • nếu phần tử mật khẩu của bạn không nằm trong <form>thẻ, hãy đặt phần tử giả làm phần tử đầu tiên trong trang html của bạn ngay sau <body>thẻ mở

  1. Bạn cần ẩn phần tử giả mà không sử dụng css display:nonevì vậy về cơ bản hãy sử dụng phần sau làm phần tử mật khẩu giả.

    <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
    
19
rybo111 2015-06-14 12:12.

Đây là các giải pháp được đề xuất của tôi, vì Google luôn nhấn mạnh vào việc ghi đè mọi công việc mà mọi người dường như thực hiện.

Tùy chọn 1 - chọn tất cả văn bản khi nhấp chuột

Đặt các giá trị của đầu vào thành ví dụ cho người dùng của bạn (ví dụ [email protected]) hoặc nhãn của trường (ví dụ Email) và thêm một lớp được gọi focus-selectvào đầu vào của bạn:

<input type="text" name="email" class="focus-select" value="[email protected]">
<input type="password" name="password" class="focus-select" value="password">

Và đây là jQuery:

$(document).on('click', '.focus-select', function(){ $(this).select();
});

Tôi thực sự không thể thấy Chrome có bao giờ lộn xộn với các giá trị. Điều đó thật điên rồ. Vì vậy, hy vọng đây là một giải pháp an toàn.

Tùy chọn 2 - đặt giá trị email thành một khoảng trắng, sau đó xóa nó

Giả sử bạn có hai đầu vào, chẳng hạn như email và mật khẩu, hãy đặt giá trị của trường email thành " "(dấu cách) và thêm thuộc tính / giá trị autocomplete="off", sau đó xóa điều này bằng JavaScript. Bạn có thể để trống giá trị mật khẩu.

Nếu người dùng không có JavaScript vì lý do nào đó, hãy đảm bảo bạn cắt bỏ phía máy chủ đầu vào của họ (dù sao thì bạn cũng nên làm như vậy), trong trường hợp họ không xóa không gian.

Đây là jQuery:

$(document).ready(function() { setTimeout(function(){ $('[autocomplete=off]').val('');
  }, 15);
});

Tôi đã đặt thời gian chờ 155dường như thỉnh thoảng hoạt động trong các bài kiểm tra của tôi, vì vậy việc đặt cược vào con số này có vẻ như là một cách đặt cược an toàn.

Việc không đặt giá trị ban đầu thành khoảng trắng dẫn đến việc Chrome để lại dữ liệu đầu vào có màu vàng, như thể nó đã tự động điền vào.

Tùy chọn 3 - đầu vào ẩn

Đặt cái này ở đầu biểu mẫu:

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS:

.hide{ display:none; }

Đảm bảo bạn giữ ghi chú HTML để các nhà phát triển khác của bạn không xóa nó! Đồng thời đảm bảo tên của đầu vào ẩn có liên quan.

18
Stiffels 2018-01-17 09:33.

Sử dụng css text-security: disk mà không sử dụng type = password .

html

<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />

or

<form autocomplete='off'>
    <input type='text' name='user' />
    <input type='text' name='pass' class='secure' />
</form>

css

input.secure {
    text-security: disc;
    -webkit-text-security: disc;
}
16
Denis Brezhitskiy 2018-03-02 05:36.

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 đối với các nhà phát triển. Mẹo để thực sự buộc tính năng 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"
13
Rob Jensen 2015-11-18 10:41.

Tôi nhận thấy rằng việc thêm thông tin này vào biểu mẫu sẽ ngăn Chrome sử dụng Tự động điền.

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Tìm thấy ở đây. https://code.google.com/p/chromium/issues/detail?id=468153#hc41

Thực sự đáng thất vọng rằng Chrome đã quyết định rằng nó biết rõ hơn nhà phát triển về thời điểm Tự động hoàn thành. Có một cảm giác thực sự của Microsoft đối với nó.

12
Avindu Hewa 2016-08-18 22:00.
<input readonly onfocus="this.removeAttribute('readonly');" type="text">

thêm thuộc tính chỉ đọc vào thẻ cùng với sự kiện onfocus xóa nó sẽ khắc phục sự cố

10
Bernesto 2015-03-20 17:14.

Đối với tổ hợp mật khẩu tên người dùng, đây là một vấn đề dễ giải quyết. Chrome heuristics tìm kiếm mẫu:

<input type="text">

theo dõi bởi:

<input type="password">

Chỉ cần phá vỡ quá trình này bằng cách làm mất hiệu lực:

<input type="text">
<input type="text" onfocus="this.type='password'">
8
Momin 2015-07-24 09:20.

Các giá trị đã nhập trước đó được chrome lưu trong bộ nhớ cache được hiển thị dưới dạng danh sách chọn thả xuống. Bạn có thể tắt tính năng này bằng autocomplete = off, địa chỉ được lưu rõ ràng trong cài đặt nâng cao của chrome cung cấp cửa sổ bật lên tự động điền khi trường địa chỉ được lấy tiêu điểm. Bạn có thể tắt tính năng này bằng autocomplete = "false" .Nhưng nó sẽ cho phép chrome hiển thị các giá trị được lưu trong bộ nhớ cache trong trình đơn thả xuống.

Trên một trường html đầu vào sau đây sẽ tắt cả hai.

Role="presentation" & autocomplete="off"

Trong khi chọn các trường đầu vào để tự động điền địa chỉ, Chrome sẽ bỏ qua những trường đầu vào không có phần tử html nhãn trước đó.

Để đảm bảo trình phân tích cú pháp chrome bỏ qua trường nhập cho địa chỉ tự động điền, bạn có thể thêm nút ẩn hoặc điều khiển hình ảnh giữa nhãn và hộp văn bản. Điều này sẽ phá vỡ trình tự phân tích cú pháp chrome của việc tạo cặp nhãn-đầu vào để tự động điền. Hộp kiểm bị bỏ qua khi phân tích cú pháp cho các trường địa chỉ

Chrome cũng xem xét thuộc tính "for" trên phần tử nhãn. Nó có thể được sử dụng để phá vỡ trình tự phân tích cú pháp của chrome.

8
mccainz 2016-06-01 05:20.

Mike Nelsons đã cung cấp giải pháp không hoạt động đối với tôi trong Chrome 50.0.2661.102 m. Chỉ cần thêm một phần tử đầu vào cùng loại với hiển thị: none set không còn tắt tính năng tự động hoàn tất của trình duyệt gốc. Bây giờ cần phải sao chép thuộc tính tên của trường nhập mà bạn muốn tắt tính năng tự động hoàn tất.

Ngoài ra, để tránh trường nhập trùng lặp khi chúng nằm trong phần tử biểu mẫu, bạn nên đặt một dấu tắt trên phần tử không được hiển thị. Điều này sẽ ngăn phần tử đó được gửi như một phần của hành động biểu mẫu.

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">
8
norekhov 2018-06-01 00:06.

Vào năm 2016, Google Chrome bắt đầu bỏ qua autocomplete=offmặc dù nó đang ở trong W3C. Câu trả lời họ đã đăng :

Phần khó khăn ở đây là ở đâu đó trong hành trình của web autocomplete = off trở thành một mặc định cho nhiều trường biểu mẫu, mà không có bất kỳ suy nghĩ thực sự nào được đưa ra về việc điều đó có tốt cho người dùng hay không. Điều này không có nghĩa là không có những trường hợp rất hợp lệ mà bạn không muốn dữ liệu tự động điền của trình duyệt (ví dụ: trên hệ thống CRM), nhưng nhìn chung, chúng tôi coi đó là những trường hợp thiểu số. Và kết quả là, chúng tôi bắt đầu bỏ qua tính năng tự động điền = tắt đối với dữ liệu Tự động điền của Chrome.

Về cơ bản, điều này nói lên rằng: chúng tôi biết rõ hơn người dùng muốn gì.

Họ đã mở một lỗi khác để đăng các trường hợp sử dụng hợp lệ khi tính năng tự động điền = tắt được yêu cầu

Tôi chưa thấy các vấn đề liên quan đến tính năng tự động hoàn tất trong tất cả ứng dụng B2B của mình mà chỉ với việc nhập loại mật khẩu.

Tự động điền các bước nếu có bất kỳ trường mật khẩu nào trên màn hình, thậm chí là trường ẩn. Để phá vỡ logic này, bạn có thể đặt mỗi trường mật khẩu thành dạng riêng của nó nếu nó không phá vỡ logic trang của riêng bạn.

<input type=name >

<form>
    <input type=password >
</form>
7
Ryan Grush 2015-03-19 08:28.

Nếu bạn đang gặp sự cố với việc giữ chỗ dành sẵn nhưng vô hiệu hóa tính năng tự động điền của chrome, tôi đã tìm thấy giải pháp này.

Vấn đề

HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

http://jsfiddle.net/xmbvwfs6/1/

Ví dụ trên vẫn tạo ra sự cố tự động điền, nhưng nếu bạn sử dụng required="required"và một số CSS, bạn có thể sao chép trình giữ chỗ và Chrome sẽ không nhận thẻ.

Giải pháp

HTML

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

CSS

input {
    margin-bottom: 10px;
    width: 200px;
    height: 20px;
    padding: 0 10px;
    font-size: 14px;
}
input + label {
    position: relative;
    left: -216px;
    color: #999;
    font-size: 14px;
}
input:invalid + label { 
    display: inline-block; 
}
input:valid + label { 
    display: none; 
}

http://jsfiddle.net/mwshpx1o/1/

7
MZaragoza 2015-03-19 09:24.

Tôi thực sự không thích tạo các trường ẩn, tôi nghĩ rằng việc làm như vậy sẽ rất nhanh rất khó hiểu.

Trên các trường đầu vào mà bạn muốn dừng tự động hoàn thành, điều này sẽ hoạt động. Làm cho các trường chỉ đọc và trên tiêu điểm, hãy xóa thuộc tính đó như thế này

<input readonly onfocus="this.removeAttribute('readonly');" type="text">

Điều này làm là trước tiên, bạn phải xóa thuộc tính chỉ đọc bằng cách chọn trường và tại thời điểm đó, rất có thể bạn sẽ điền thông tin nhập liệu của chính người dùng của mình và xem xét tính năng tự động điền để tiếp quản

7
MagicSux 2017-10-23 02:27.

Vì tất cả chúng ta đều gặp vấn đề này, tôi đã đầu tư một thời gian để viết một phần mở rộng jQuery hoạt động cho vấn đề này. Google phải theo dõi đánh dấu html, không phải chúng tôi theo dõi Google

(function ($) { "use strict"; $.fn.autoCompleteFix = function(opt) {
    var ro = 'readonly', settings = $.extend({ attribute : 'autocomplete', trigger : { disable : ["off"], enable : ["on"] }, focus : function() { $(this).removeAttr(ro);
        },
        force : false
    }, opt);

    $(this).each(function(i, el) { el = $(el);

        if(el.is('form')) {
            var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable)) el.find('input').autoCompleteFix({force:force}); } else { var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
            var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
            if (settings.force && !enabled || disabled)
                el.attr(ro, ro).focus(settings.focus).val("");
        }
    });
};
})(jQuery);

Chỉ cần thêm nó vào một tệp như /js/jquery.extends.js và đưa nó vào trong jQuery. Áp dụng nó cho từng phần tử biểu mẫu khi tải tài liệu như sau:

$(function() {
    $('form').autoCompleteFix();
});

jsfiddle với các bài kiểm tra

6
Priyanka 2014-03-20 23:20.

Hãy thử jQuerymã sau đây đã làm việc cho tôi.

if ($.browser.webkit) { $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}
6
Chris Pratt 2014-07-25 09:56.

Có hai phần cho cái này. Chrome và các trình duyệt khác sẽ ghi nhớ các giá trị đã nhập trước đó cho tên trường và cung cấp danh sách tự động điền cho người dùng dựa trên đó (đáng chú ý là các đầu vào loại mật khẩu không bao giờ được ghi nhớ theo cách này, vì những lý do khá rõ ràng). Bạn có thể thêm autocomplete="off"để ngăn chặn điều này trên những thứ như trường email của bạn.

Tuy nhiên, sau đó bạn có bộ đệm mật khẩu. Hầu hết các trình duyệt đều có triển khai tích hợp riêng và cũng có nhiều tiện ích của bên thứ ba cung cấp chức năng này. Điều này, bạn không thể dừng lại. Đây là người dùng tự lựa chọn lưu thông tin này để tự động điền vào sau này và hoàn toàn nằm ngoài phạm vi và phạm vi ảnh hưởng của ứng dụng của bạn.

6

Theo báo cáo lỗi Chromium # 352347, Chrome không còn tôn trọng autocomplete="off|false|anythingelse", cả trên biểu mẫu cũng như đầu vào.

Giải pháp duy nhất phù hợp với tôi là thêm trường mật khẩu giả :

<input type="password" class="hidden" />
<input type="password" />
6
mumair 2015-12-17 20:24.

Bằng cách đặt autocompletethành offnên hoạt động ở đây, tôi có một ví dụ được google sử dụng trong trang tìm kiếm. Tôi tìm thấy điều này từ phần tử kiểm tra.

chỉnh sửa : Trong trường hợp offkhông hoạt động, hãy thử falsehoặc nofill. Trong trường hợp của tôi, nó đang hoạt động với phiên bản chrome 48.0

5
hyper_st8 2015-02-27 07:26.

Đây là một vụ hack bẩn thỉu -

Bạn có phần tử của mình ở đây (thêm thuộc tính bị vô hiệu hóa):

<input type="text" name="test" id="test" disabled="disabled" />

Và sau đó ở cuối trang web của bạn đặt một số JavaScript:

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>
5
Michael. 2016-02-13 06:11.

Giải pháp khác nhau, dựa trên webkit. Như đã đề cập, bất cứ khi nào Chrome tìm thấy trường mật khẩu, nó sẽ tự động hoàn thành email. AFAIK, điều này không phụ thuộc vào tự động hoàn thành = [bất cứ điều gì].

Để tránh điều này, hãy thay đổi kiểu nhập thành văn bản và áp dụng phông chữ bảo mật của webkit ở bất kỳ hình thức nào bạn muốn.

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

Từ những gì tôi có thể thấy, điều này ít nhất cũng an toàn như kiểu nhập = mật khẩu, sao chép và dán an toàn. Tuy nhiên, nó dễ bị tấn công bằng cách loại bỏ kiểu sẽ xóa dấu hoa thị, tất nhiên kiểu nhập = mật khẩu có thể dễ dàng được thay đổi thành kiểu nhập = văn bản trong bảng điều khiển để tiết lộ bất kỳ mật khẩu tự động điền nào vì vậy nó thực sự giống nhau.

4
Thuong 2015-09-15 22:18.

Tôi đã đối mặt với vấn đề tương tự. Và đây là giải pháp để tắt tính năng tự động điền tên người dùng và mật khẩu trên Chrome (chỉ mới được thử nghiệm với Chrome)

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">
3
user3638028 2014-05-15 08:51.

Cách duy nhất phù hợp với tôi là: (yêu cầu jQuery)

$(document).ready(function(e) { if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Tận dụng lợi thế của việc bán hàng nhân Ngày của Cha này

Tận dụng lợi thế của việc bán hàng nhân Ngày của Cha này

Màn hình Samsung Galaxy S9 Plus. Chủ nhật này là Ngày của Cha⁠ — trong trường hợp nó khiến bạn suy nghĩ — và thay vì mua cho anh ấy một chiếc cà vạt trong năm nay, có lẽ đã đến lúc bạn mua cho anh ấy thứ mà anh ấy sẽ thực sự sử dụng.

Assassin's Creed Snuck Into Monster Hunter: World Last Night

Assassin's Creed Snuck Into Monster Hunter: World Last Night

Monster Hunter: World yêu thích các sự kiện chéo. Dù có nghĩa là hóa trang thành Dante của Devil May Cry, giả dạng Horizon: Zero Dawn's Aloy, hay chiến đấu với quái vật Final Fantasy, các nhiệm vụ sự kiện khác nhau của Thế giới được nâng cấp tự do so với các trò chơi khác.

Ava DuVernay Có Quà Tặng Ngày Của Mẹ cho Tất Cả Chúng Ta: Nếp Nhăn Thời Gian Sẽ Được Viết Lại Vào Cuối Tuần Ngày Của Mẹ!

Ava DuVernay Có Quà Tặng Ngày Của Mẹ cho Tất Cả Chúng Ta: Nếp Nhăn Thời Gian Sẽ Được Viết Lại Vào Cuối Tuần Ngày Của Mẹ!

Storm Reid, Oprah Winfrey, Mindy Kaling, Reese Witherspoon và Ava DuVernay tại buổi chiếu đặc biệt của A Wrinkle in Time tại Nhà hát Walter Reade ở Thành phố New York vào ngày 7 tháng 3 năm 2018 “Ava rất mong được nói chuyện với bạn,” một trong những người của Array dư luận viên nói qua điện thoại. (Array là tập thể phân phối, nghệ thuật và vận động chính sách của Ava DuVernay tập trung vào các bộ phim của người da màu và phụ nữ.

Nhiệm vụ bất khả thi 5 sẽ khôi phục niềm tin của bạn trong phim hành động Tentpole

Nhiệm vụ bất khả thi 5 sẽ khôi phục niềm tin của bạn trong phim hành động Tentpole

Mission Impossible: Rogue Nation bắt đầu ở một cấp độ khác. Theo nghĩa đen.

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

McCain, người đang làm việc cho một album mới, lần đầu tiên bước vào vòng kết nối vào tối thứ Sáu ở Nashville

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Tôi viết như thế nào

Tôi viết như thế nào

Đối với tôi, mọi thứ là về dòng đầu tiên đó và nó sẽ đưa bạn đến đâu. Một số nhà văn bị điều khiển bởi cốt truyện, sự sắp xếp tinh tế của các quân cờ, trong khi những người khác bị lôi cuốn bởi một nhân vật và khả năng thực hiện một cuộc hành trình với một người bạn hư cấu mới.

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Language