Apakah ada cara W3C yang valid untuk menonaktifkan pelengkapan otomatis dalam bentuk HTML?

424

Saat menggunakan xhtml1-transitional.dtddoctype, kumpulkan nomor kartu kredit dengan HTML berikut

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

akan menandai peringatan pada validator W3C:

tidak ada atribut "pelengkapan otomatis".

Apakah ada cara W3C / standar untuk menonaktifkan lengkapi-otomatis peramban pada bidang sensitif dalam formulir?

html standards forms w3c matt b
sumber
10
Apakah Anda yakin mengacaukan pengaturan autocomplete pengguna adalah apa yang ingin Anda lakukan? Jika dihidupkan, mereka mungkin menyukainya. Autocomplete adalah fitur yang sepenuhnya sisi browser, seperti tombol yang memungkinkan pengguna untuk mengubah ukuran font, dll. Anda tidak boleh mengganggu keinginan mereka
rmeador
113
Bahkan untuk sesuatu yang sensitif seperti nomor kartu kredit? Saya tidak dapat memikirkan banyak orang yang ingin hal itu diingat - terutama karena pelengkapan otomatis diaktifkan secara default di sebagian besar peramban. Jika mereka ingin itu mengingat yang buruk, mereka dapat menggunakan sesuatu yang mengisi formulir seperti bilah alat Google.
matt b
13
Kasing penggunaan saya sedikit berbeda - Saya menggulir autocomplete sendiri dan saya tidak ingin bentrok dengan browser. Saya baru saja menemukan bahwa autocomplete = "off" tidak valid, tetapi sepertinya tidak ada solusi sederhana lainnya (menyuntikkannya dengan js hanya konyol)
thepeer
13
@rmeador karena terkadang kami ingin memberikan alternatif yang lebih ramah pengguna ke kotak saran otomatis standar. @corydoras tolong jangan memaksakan bobot OSX Anda, itu tidak membantu untuk resolusi dari pertanyaan ini.
Josh M.
12
Masalahnya adalah bahwa bank akan meminta pertanggungjawaban pedagang jika terjadi transaksi penipuan ... bahkan jika kesalahan pelanggannya 100%. Oleh karena itu, dalam beberapa keadaan, adalah sah untuk menonaktifkan fitur untuk pelanggan.
Alexandre H. Tremblay

Jawaban:

422

Berikut ini adalah artikel bagus dari MDC yang menjelaskan masalah (dan solusi) untuk membentuk pelengkapan otomatis. Microsoft juga telah menerbitkan sesuatu yang serupa di sini .

Sejujurnya, jika ini adalah sesuatu yang penting bagi pengguna Anda, 'melanggar' standar dengan cara ini tampaknya tepat. Misalnya, Amazon menggunakan atribut 'pelengkapan otomatis' sedikit, dan tampaknya berfungsi dengan baik.

Jika Anda ingin menghapus peringatan sepenuhnya, Anda dapat menggunakan JavaScript untuk menerapkan atribut ke browser yang mendukungnya (IE dan Firefox adalah browser penting) menggunakan someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

Terakhir, jika situs Anda menggunakan HTTPS, IE secara otomatis mematikan pelengkapan otomatis (seperti yang dilakukan beberapa peramban lain, sejauh yang saya tahu).

Memperbarui

Karena jawaban ini masih mendapatkan beberapa peningkatan, saya hanya ingin menunjukkan bahwa dalam HTML5, Anda dapat menggunakan atribut 'pelengkapan otomatis' pada elemen formulir Anda. Lihat dokumentasi pada W3C untuk itu.

Nick Presta
sumber
41
Sepertinya Firefox tidak mematikan pelengkapan otomatis di https, tapi itu adalah pengetahuan yang berguna. Terima kasih!
matt b
3
Safari tidak menghormati atribut autocomplete = "off". Lihat stackoverflow.com/questions/22817801/…
Skurpi
1
autocompletedapat digunakan tidak hanya pada formelemen , dan offnilai berfungsi setidaknya dichromium-40.0.2214.115
x-yuri
W3c tampaknya memperluas standar untuk pelengkapan otomatis dalam HTML5.1 (dalam konsep pada komentar ini) w3c.github.io/html/…
Justin Nafe
1
Jika tidak ada yang berfungsi, Gunakan textarea bukan textbox untuk mematikan autocomplete.
Bsienn
64

Saya akan sangat terkejut jika W3C akan mengusulkan cara yang akan bekerja dengan (X) HTML4. Fitur autocomplete sepenuhnya berbasis browser, dan diperkenalkan selama beberapa tahun terakhir (setelah standar HTML4 ditulis).

Tidak akan heran jika HTML5 akan memilikinya.

Sunting: Seperti yang saya duga, HTML5 memang memiliki fitur itu. Untuk mendefinisikan halaman Anda sebagai HTML5, gunakan DOCTYPE berikut (yaitu: letakkan ini sebagai teks pertama dalam kode sumber Anda). Perhatikan bahwa tidak semua browser mendukung standar ini, karena masih dalam bentuk konsep.

<!DOCTYPE html>
Henrik Paul
sumber
7
Semua browser mengharapkan versi Konqueror yang lebih lama mendukungnya. Bahkan IE6 mendukungnya. DOCTYPE untuk pergi.
BalusC
56

HTML 4 : Tidak

HTML 5 : Ya

Atribut autocomplete adalah atribut yang disebutkan. Atribut memiliki dua status. Kata kunci on maps ke status on, dan kata kunci off map ke status off. Atribut juga dapat dihilangkan. Nilai default yang hilang adalah status aktif . The off negara menunjukkan bahwa secara default, bentuk kontrol dalam bentuk akan memiliki set autofill nama dibidangnya untuk off ; status aktif menunjukkan bahwa secara default, kontrol formulir dalam formulir akan autofillmenetapkan nama bidangnya ke "on".

Referensi: W3

RuudKok
sumber
@ freestock.tk Ya itu lebih jelas dari yang lainnya. Kesederhanaan penting.
OverCoder
32

Tidak, tetapi pelengkapan otomatis peramban sering dipicu oleh bidang yang memiliki nameatribut yang sama dengan bidang yang sebelumnya diisi. Jika Anda bisa memasang cara cerdas untuk memiliki nama bidang acak , pelengkapan otomatis tidak akan dapat menarik nilai yang dimasukkan sebelumnya untuk bidang tersebut.

Jika Anda memberi bidang input nama seperti " email_<?= randomNumber() ?>", dan kemudian memiliki skrip yang menerima loop data ini melalui variabel POST atau GET mencari sesuatu yang cocok dengan pola " email_[some number]", Anda bisa melakukan ini, dan ini akan memiliki ( praktis) dijamin berhasil, apa pun perambannya .

Phantom Watson
sumber
6
Ini akan membuat pengujian otomatis lebih sulit.
David Waters
14
Akan membuat pengujian otomatis lebih sulit, hanya jika perangkat lunak pengujian Anda tidak dapat memeriksa / membaca bidang yang mungkin memiliki nomor acak ditambahkan ke mereka. Mungkin saatnya untuk meningkatkan perangkat lunak pengujian otomatis Anda.
corydoras
8
Info pelengkapan otomatis masih akan disimpan di direktori data peramban, bukan?
Joey Adams
2
Agaknya. Tapi itu tidak akan diharapkan untuk benar-benar muncul lagi ke pengguna.
Phantom Watson
1
Chrome sekarang menggunakan atribut type = "password" daripada atribut nama untuk situs tertentu. Saya memiliki nama = "kata sandi baru" autocomplete = 'off' type = "kata sandi" dan itu akan diisi otomatis! Jika saya mengubah jenisnya, tidak ada pengisian otomatis
Enigma Plus
31

Tidak, artikel bagus ada di sini di Mozila Wiki .

Saya akan terus menggunakan yang tidak valid attribute. Saya pikir di sinilah pragmatisme harus menang atas validasi.

David Waters
sumber
23

Bagaimana kalau mengaturnya dengan JavaScript?

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

Itu tidak sempurna, tetapi HTML Anda akan valid.

Greg
sumber
8
Menggunakan javascript sebagai solusi untuk validasi kesalahan seperti menyapu debu di bawah karpet. Sementara dokumen HTML mungkin menjadi valid, halaman HTML + JS yang dihasilkan tidak akan.
fregante
11

Jika Anda menggunakan jQuery, Anda dapat melakukan sesuatu seperti itu:

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

dan gunakan kelas autocompleteOff di mana Anda inginkan:

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

Jika Anda ingin SEMUA input Anda menjadi autocomplete=off, Anda cukup menggunakannya:

$(document).ready(function(){$("input").attr("autocomplete","off");});
Totoche
sumber
4
Hanya menggunakan HTML5 doctype lebih mudah dan lebih baik.
BalusC
5
ini bukan html yang benar-benar valid, itu hanya mengatur autocompleteatribut (tidak valid) dengan cara yang berbeda selain di html
matt b
Kode ini tidak berfungsi untuk saya; Saya sudah menggunakan $('input.autocompleteOff').val('');yang tampaknya OK.
dqd
5
Menggunakan javascript sebagai solusi untuk validasi kesalahan seperti menyapu debu di bawah karpet. Sementara dokumen HTML mungkin menjadi valid, halaman HTML + JS yang dihasilkan tidak akan.
fregante
8

Cara lain - yang juga akan membantu keamanan adalah dengan memanggil kotak input sesuatu yang berbeda setiap kali Anda menampilkannya: seperti captha. Dengan begitu, sesi dapat membaca input satu kali saja dan Auto-Complete tidak memiliki apa-apa untuk melanjutkan.

Hanya satu poin tentang pertanyaan rmeador tentang apakah Anda harus mengganggu pengalaman browser: Kami mengembangkan sistem Manajemen Kontak & CRM, dan ketika Anda mengetik data orang lain ke dalam formulir yang Anda tidak ingin itu terus-menerus menyarankan rincian Anda sendiri.

Ini berfungsi untuk kebutuhan kita, tetapi kemudian kita memiliki kemewahan memberitahu pengguna untuk mendapatkan browser yang layak :)

autocomplete='off'
Enigma Plus
sumber
8

autocomplete="off" ini harus memperbaiki masalah untuk semua browser modern.

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

Pada versi browser Gecko saat ini, atribut autocomplete berfungsi dengan sempurna. Untuk versi sebelumnya, kembali ke Netscape 6.2, ini berfungsi dengan pengecualian untuk formulir dengan "Alamat" dan "Nama"

Memperbarui

Dalam beberapa kasus, browser akan terus menyarankan nilai pelengkapan otomatis meskipun atribut pelengkapan otomatis disetel ke mati. Perilaku tak terduga ini bisa sangat membingungkan bagi pengembang. Trik untuk benar-benar memaksa pelengkapan otomatis adalah dengan menetapkan string acak ke atribut , misalnya:

autocomplete="nope"

Karena nilai acak ini bukan a valid one, browser akan menyerah.

Dokumentasi

Emilio Gort
sumber
Peramban modern tidak menghargai pelengkapan otomatis = tidak aktif karena pilihan. : / Sayangnya.
Alexus
@Alexus menambahkan beberapa pembaruan ... perubahan internet sangat cepat
Emilio Gort
6

Menggunakan atribut 'nama' acak bekerja untuk saya.

Saya mereset atribut nama saat mengirim formulir sehingga Anda masih dapat mengaksesnya dengan nama saat formulir dikirim. (menggunakan atribut id untuk menyimpan nama)

opznhaarlems
sumber
5

Perhatikan bahwa ada beberapa kebingungan tentang lokasi atribut autocomplete. Ini dapat diterapkan baik untuk seluruh tag FORMULIR atau untuk masing-masing tag INPUT, dan ini tidak benar-benar standar sebelum HTML5 (yang secara eksplisit memungkinkan kedua lokasi ). Dokumen lama terutama artikel Mozilla ini hanya menyebutkan tag FORM. Pada saat yang sama beberapa pemindai keamanan hanya akan mencari pelengkapan otomatis dalam tag INPUT dan mengeluh jika itu hilang (bahkan jika itu ada di FORM induknya). Analisis yang lebih rinci dari kekacauan ini diposting di sini: Kebingungan tentang AUTOCOMPLETE = OFF atribut dalam bentuk HTML .

kravietz
sumber
3

Tidak ideal, tetapi Anda dapat mengubah id dan nama kotak teks setiap kali Anda merendernya - Anda harus melacaknya juga dari sisi server sehingga Anda bisa mengeluarkan data.

Tidak yakin apakah ini akan berhasil atau tidak, hanya sebuah pemikiran.

Kieron
sumber
2

Saya pikir ada cara yang lebih sederhana. Buat input tersembunyi dengan nama acak (via javascript) dan atur nama pengguna untuk itu. Ulangi dengan kata sandi. Dengan cara ini skrip backend Anda tahu persis nama bidang yang sesuai, sambil tetap melengkapi otomatis dalam gelap.

Saya mungkin salah, tapi itu hanya ide.

Ular dan Kopi
sumber
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
sumber
-1

Solusi ini bekerja dengan saya:

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

jika Anda ingin menggunakan isiOtomatis di wilayah ini: tambahkan autocomplete="false"elemen ex:

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

Pelengkapan otomatis valid tidak aktif

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>
Desain Web Southampton
sumber
13
tentu saja jika pengguna mematikan JS, mereka tidak dapat menyelesaikan pesanan karena mereka tidak dapat memasukkan nomor kartu mereka? Lebih baik untuk melengkapi atribut melalui JS saya akan mengatakan - kasus terburuk, JS off memberikan bidang nomor kartu dengan potensi pelengkapan otomatis, tetapi setidaknya mereka dapat melakukan pemesanan ... hanya pemikiran :)
Terry_Brown
3
Ini bahkan tidak lucu.
Ricardo Pieper