Nonaktifkan pelengkapan otomatis melalui CSS

Apakah mungkin menggunakan CSS untuk menonaktifkan pelengkapan otomatis pada elemen formulir (khususnya bidang teks)?

Saya menggunakan pustaka tag yang tidak mengizinkan elemen pelengkapan otomatis dan saya ingin menonaktifkan pelengkapan otomatis tanpa menggunakan Javascript.

Anda dapat menggunakan generated iddan nameeverytime, yang berbeda, sehingga browser tidak dapat mengingat bidang teks ini dan akan gagal untuk menyarankan beberapa nilai.

Setidaknya ini adalah alternatif yang aman untuk lintas browser, tetapi saya akan merekomendasikan untuk mengikuti jawaban dari RobertsonM ( autocomplete="off").

Seperti berdiri, tidak ada atribut 'pelengkapan otomatis mati' di CSS. Namun, html memiliki kode yang mudah untuk ini:

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

Jika Anda mencari efektor seluruh situs, yang mudah adalah dengan hanya memiliki fungsi js untuk menjalankan semua 'input' dan menambahkan tag ini, atau mencari kelas / id css yang sesuai.

Atribut pelengkapan otomatis berfungsi dengan baik di Chrome dan Firefox (!), Tetapi lihat juga Adakah cara W3C yang valid untuk menonaktifkan pelengkapan otomatis dalam bentuk HTML?

Anda dapat dengan mudah menerapkan dengan jQuery

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

Jika Anda menggunakan, formAnda dapat menonaktifkan semua pelengkapan otomatis dengan,

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

CSS tidak memiliki kemampuan ini. Anda perlu menggunakan skrip sisi klien.

Saya mencoba semua cara yang disarankan dari jawaban pertanyaan ini dan artikel lain di web tetapi tidak berhasil. Saya mencoba autocomplete = "new-random-value", autocomplete = "off" dalam elemen formulir, menggunakan skrip sisi klien seperti di bawah ini tetapi di luar $ (document) .ready () sebagai salah satu pengguna yang disebutkan:

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

Saya menemukan mungkin prioritas lain di browser menyebabkan perilaku aneh ini! Jadi saya mencari lebih banyak dan akhirnya, saya membaca lagi dengan hati-hati di bawah baris dari artikel yang bagus ini :

Karena alasan ini, banyak browser modern tidak mendukung autocomplete = "off" untuk bidang login:

Jika situs menyetel autocomplete = "off" untuk a, dan formulir tersebut menyertakan kolom masukan nama pengguna dan sandi, browser akan tetap menawarkan untuk mengingat login ini, dan jika pengguna setuju, browser akan mengisi otomatis kolom tersebut saat pengguna lain kali mengunjungi halaman. Jika situs menyetel autocomplete = "off" untuk kolom nama pengguna dan sandi, browser akan tetap menawarkan untuk mengingat login ini, dan jika pengguna setuju, browser akan mengisi otomatis kolom tersebut saat pengguna mengunjungi halaman tersebut di lain waktu. Ini adalah perilaku di Firefox (sejak versi 38), Google Chrome (sejak 34), dan Internet Explorer (sejak versi 11).

Jika Anda menentukan halaman manajemen pengguna tempat pengguna dapat menentukan sandi baru untuk orang lain, dan oleh karena itu Anda ingin mencegah pengisian kolom sandi secara otomatis, Anda dapat menggunakan autocomplete = "new-password" ; namun, dukungan untuk nilai ini belum diterapkan di Firefox.

Ini baru saja berhasil. Saya mencoba di chrome secara khusus dan saya harap ini terus bekerja dan membantu orang lain.

Saya memecahkan masalah dengan menambahkan nama pelengkapan otomatis palsu untuk semua input.

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

Ada 3 cara untuk itu, saya sebutkan agar menjadi cara yang lebih baik ...

Cara 1-HTML:

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

Cara 2-Javascript:

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

Cara 3-jQuery:

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

Berkat solusi @ ahhmarr, saya dapat menyelesaikan masalah yang sama di lingkungan Angular + ui-router saya, yang akan saya bagikan di sini untuk siapa pun yang tertarik.

Di saya, index.htmlsaya telah menambahkan skrip berikut:

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

Kemudian untuk menutupi perubahan status, saya telah menambahkan yang berikut ini di pengontrol root saya:

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

Batas waktu adalah untuk dirender html sebelum menerapkan jquery.

Jika Anda menemukan solusi yang lebih baik, beri tahu saya.

Anda tidak dapat menggunakan CSS untuk menonaktifkan pelengkapan otomatis, tetapi Anda dapat menggunakan HTML:

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

Secara teknis Anda dapat mengganti falsedengan nilai yang tidak valid dan itu akan berhasil. IOS ini satu-satunya solusi yang saya temukan yang juga berfungsi di Edge.

Saya hanya menggunakan 'new-password'sebagai gantinya 'off'untuk pelengkapan otomatis.

dan saya juga telah mencoba menggunakan kode ini dan berfungsi (setidaknya di pihak saya), saya menggunakan WP dan GravityForm untuk informasi Anda

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

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