Bagaimana Anda tahu jika browser telah secara otomatis mengisi kotak teks? Terutama dengan kotak nama pengguna & kata sandi yang mengisi secara otomatis di sekitar pemuatan halaman.
Pertanyaan pertama saya adalah kapan ini terjadi dalam urutan pemuatan halaman? Apakah sebelum atau sesudah dokumen. Sudah?
Kedua, bagaimana saya bisa menggunakan logika untuk mengetahui apakah ini terjadi? Bukannya saya ingin menghentikan ini terjadi, cukup masukkan ke dalam acara. Lebih disukai sesuatu seperti ini:
if (autoFilled == true) {
} else {
}
Jika memungkinkan saya akan senang melihat jsfiddle menunjukkan jawaban Anda.
Kemungkinan duplikat
Acara DOM untuk isi ulang kata sandi browser?
IsiOtomatis Browser dan Javascript memicu kejadian
--Keduanya pertanyaan ini tidak benar-benar menjelaskan peristiwa apa yang dipicu, mereka hanya terus memeriksa ulang kotak teks (tidak baik untuk kinerja!).
sumber
Jawaban:
Masalahnya adalah pengisianotomatis ditangani secara berbeda oleh browser yang berbeda. Beberapa mengirimkan perubahan acara, beberapa tidak. Jadi, hampir tidak mungkin untuk menghubungkan ke suatu peristiwa yang dipicu ketika browser secara otomatis melengkapi bidang input.
Ubah pemicu acara untuk berbagai browser:
Untuk bidang nama pengguna / kata sandi:
Untuk bidang formulir lainnya:
Pilihan terbaik Anda adalah menonaktifkan pelengkapan otomatis untuk formulir yang menggunakan
autocomplete="off"
formulir atau jajak pendapat secara berkala untuk melihat apakah isinya diisi.Untuk pertanyaan Anda apakah diisi atau sebelum dokumen. Lagi-lagi ini bervariasi dari browser ke browser dan bahkan versi ke versi. Untuk bidang nama pengguna / kata sandi hanya ketika Anda memilih bidang kata sandi nama pengguna diisi. Jadi secara keseluruhan Anda akan memiliki kode yang sangat berantakan jika Anda mencoba melampirkan ke acara apa pun.
Anda dapat membaca dengan baik di SINI
sumber
input
acaranya. Itulah yang Chrome jalankan pada pelengkapan otomatis (dan mungkin pengisian otomatis juga, jika Chrome memilikinya; saya selalu mematikan hal ini).Solusi untuk browser WebKit
Dari dokumen MDN untuk : -webkit-autofill CSS pseudo-class:
Kita dapat mendefinisikan aturan css transisi batal pada
<input>
elemen yang diinginkan setelah:-webkit-autofill
diedit. JS kemudian dapat terhubung keanimationstart
acara tersebut.Penghargaan untuk tim Klarna UI . Lihat penerapannya yang bagus di sini:
sumber
Ini berfungsi untuk saya di Firefox, Chrome, dan Edge terbaru:
sumber
'input'
! Ini adalah solusi termudah bagi saya, tetapi saya menguji hanya autocomplete, bukan autofill.Untuk Google chrome autocomplete, ini bekerja untuk saya:
sumber
Untuk berjaga-jaga seandainya seseorang mencari solusi (seperti saya hari ini), untuk mendengarkan perubahan isi ulang peramban, inilah metode jquery khusus yang saya buat, hanya untuk menyederhanakan proses saat menambahkan pendengar perubahan ke input:
Anda bisa menyebutnya seperti ini:
sumber
Saya banyak membaca tentang masalah ini dan ingin memberikan solusi cepat yang membantu saya.
tempat
inputBackgroundNormalState
templat saya adalah 'rgb (255, 255, 255)'.Jadi pada dasarnya ketika browser menerapkan pelengkapan otomatis, mereka cenderung menunjukkan bahwa input diisi otomatis dengan menerapkan warna kuning (mengganggu) yang berbeda pada input.
Sunting: ini berfungsi untuk setiap browser
sumber
Sayangnya satu-satunya cara andal yang saya temukan untuk memeriksa peramban silang ini adalah polling input. Untuk membuatnya responsif juga dengarkan acara. Chrome telah mulai menyembunyikan nilai pengisian otomatis dari javascript yang membutuhkan peretasan.
Tambahkan perbaikan untuk nilai kata sandi IsiOtomatis tersembunyi Chrome.
sumber
Ada komponen polyfill baru untuk mengatasi masalah ini di github. Lihat acara autofill . Hanya perlu memasang dan menginstalnya, autofill berfungsi seperti yang diharapkan.
sumber
Solusi saya:
Dengarkan
change
acara seperti biasa, dan pada konten DOM, lakukan ini:Ini akan memecat acara perubahan untuk semua bidang yang tidak kosong sebelum pengguna memiliki kesempatan untuk mengeditnya.
sumber
Saya juga menghadapi masalah yang sama di mana label tidak mendeteksi pengisian otomatis dan animasi untuk memindahkan label pada pengisian teks tumpang tindih dan solusi ini berhasil untuk saya.
sumber
Saya sedang mencari hal serupa. Khusus Chrome ... Dalam kasus saya, pembungkus div perlu tahu apakah bidang input diisi otomatis. Jadi saya bisa memberikan css tambahan seperti yang dilakukan Chrome pada bidang input saat diisi otomatis. Dengan melihat semua jawaban di atas, solusi gabungan saya adalah sebagai berikut:
Html agar ini berfungsi adalah
sumber
Saya tahu ini adalah utas lama tetapi saya dapat membayangkan banyak yang datang untuk menemukan solusi untuk ini di sini.
Untuk melakukan ini, Anda dapat memeriksa apakah input memiliki nilai dengan:
Saya menggunakan ini sendiri untuk memeriksa nilai-nilai dalam formulir login saya ketika dimuat untuk mengaktifkan tombol kirim. Kode ini dibuat untuk jQuery tetapi mudah diubah jika diperlukan.
sumber
($("#inputID:-webkit-autofill").val().length > 0) {
Ini adalah solusi untuk peramban dengan mesin render webkit . Ketika formulir diisi otomatis, input akan mendapatkan kelas semu : -webkit-autofill- (input fe: -webkit-autofill {...}). Jadi ini adalah pengidentifikasi apa yang harus Anda periksa melalui JavaScript.
Solusi dengan beberapa bentuk tes:
Dan javascript:
Masalah saat halaman dibuka adalah mendapatkan nilai kata sandi, bahkan panjangnya. Ini karena keamanan browser. Juga batas waktu , itu karena browser akan mengisi formulir setelah beberapa urutan waktu.
Kode ini akan menambahkan kelas auto_filled ke input yang diisi. Juga, saya mencoba memeriksa nilai kata sandi jenis input, atau panjangnya, tetapi itu berhasil setelah beberapa peristiwa pada halaman tersebut terjadi. Jadi saya mencoba memicu beberapa acara, tetapi tidak berhasil. Untuk sekarang ini solusi saya. Nikmati!
sumber
Saya punya solusi sempurna untuk pertanyaan ini, coba cuplikan kode ini.
Demo ada di sini
sumber
Pada chrome, Anda dapat mendeteksi bidang isian otomatis dengan menyetel aturan css khusus untuk elemen isian otomatis, dan kemudian mengeceknya dengan javascript jika elemen tersebut menerapkan aturan itu.
Contoh:
CSS
JavaScript
sumber
Berikut adalah solusi CSS yang diambil dari tim Klarna UI. Lihat implementasi bagus mereka di sini sumber daya
Bekerja dengan baik untuk saya.
sumber
Saya menggunakan solusi ini untuk masalah yang sama.
Kode HTML harus berubah menjadi ini:
dan kode jQuery harus dalam
document.ready
:sumber
Saya menggunakan acara blur pada nama pengguna untuk memeriksa apakah bidang pwd telah terisi otomatis.
Ini berfungsi untuk IE, dan seharusnya bekerja untuk semua browser lain (saya baru memeriksa IE)
sumber
blur
acara. Saya menerapkan fungsi yang sama untukchange
danblur
acara dan bekerja hebat. Solusi sederhana tanpa perpustakaan tambahan.Saya memiliki masalah yang sama dan saya telah menulis solusi ini.
Itu mulai polling pada setiap bidang input ketika halaman sedang memuat (saya telah menetapkan 10 detik tetapi Anda dapat menyetel nilai ini).
Setelah 10 detik berhenti jajak pendapat pada setiap bidang input dan mulai jajak pendapat hanya pada input fokus (jika ada). Itu berhenti ketika Anda mengaburkan input dan mulai lagi jika Anda memfokuskan satu.
Dengan cara ini Anda polling hanya ketika benar-benar dibutuhkan dan hanya pada input yang valid.
Ini tidak berfungsi dengan baik ketika Anda memiliki beberapa nilai yang dimasukkan secara otomatis, tetapi bisa di-tweak mencari setiap input pada formulir saat ini.
Sesuatu seperti:
sumber
Jika Anda hanya ingin mendeteksi apakah pengisian otomatis telah digunakan atau tidak, daripada mendeteksi kapan dan ke mana bidang pengisian otomatis telah digunakan, Anda cukup menambahkan elemen tersembunyi yang akan diisi otomatis dan kemudian memeriksa apakah ini mengandung nilai apa saja. Saya mengerti bahwa ini mungkin bukan hal yang diminati banyak orang. Setel field input dengan tabIndex negatif dan dengan koordinat absolut dari layar. Penting bahwa input adalah bagian dari bentuk yang sama dengan sisa input. Anda harus menggunakan nama yang akan diambil oleh IsiOtomatis (mis. "Nama kedua").
Tambahkan input ini ke formulir dan periksa nilainya pada formulir kirim.
sumber
Ada tidak muncul untuk menjadi solusi untuk ini yang tidak bergantung pada polling (setidaknya untuk Chrome). Ini hampir sama hackish, tapi saya pikir sedikit lebih baik daripada polling global.
Pertimbangkan skenario berikut:
Pengguna mulai mengisi bidang1
Pengguna memilih saran pelengkapan otomatis yang isian isian isian2 dan isian3
Solusi: Daftarkan onblur pada semua bidang yang memeriksa keberadaan bidang isian otomatis melalui cuplikan $ jQuery berikut (': - webkit-autofill')
Ini tidak akan langsung karena akan ditunda sampai pengguna mengaburkan bidang1 tetapi tidak bergantung pada jajak pendapat global sehingga IMO, ini adalah solusi yang lebih baik.
Yang mengatakan, karena menekan tombol enter dapat mengirimkan formulir, Anda juga mungkin memerlukan penangan yang sesuai untuk onkeypress.
Sebagai alternatif, Anda dapat menggunakan polling global untuk memeriksa $ (': - webkit-autofill')
sumber
Dari pengalaman pribadi saya, kode di bawah ini berfungsi dengan baik dengan firefox IE dan safari, tetapi tidak berfungsi dengan baik dalam memilih pelengkapan otomatis di chrome.
Kode di bawah ini berfungsi lebih baik, karena akan memicu setiap kali pengguna mengklik bidang input dan dari sana Anda dapat memeriksa apakah bidang input kosong atau tidak.
sumber
Saya berhasil menggunakan chrome dengan:
sumber
Solusi saya adalah:
sumber
Setelah meneliti masalahnya adalah bahwa browser webkit tidak memecat acara perubahan pada pelengkapan otomatis. Solusi saya adalah mendapatkan kelas IsiOtomatis yang ditambahkan oleh webkit dan memicu perubahan acara sendiri.
Berikut ini tautan untuk masalah dalam kromium. https://bugs.chromium.org/p/chromium/issues/detail?id=636425
sumber
Untuk mendeteksi email misalnya, saya mencoba "saat perubahan" dan seorang pengamat mutasi, tidak berhasil. setInterval bekerja dengan baik dengan pengisian otomatis LinkedIn (tidak mengungkapkan semua kode saya, tetapi Anda mendapatkan idenya) dan ini cocok dengan backend jika Anda menambahkan kondisi tambahan di sini untuk memperlambat AJAX. Dan jika tidak ada perubahan di bidang formulir, seperti mereka tidak mengetik untuk mengedit email mereka, lastEmail mencegah ping AJAX yang tidak berguna.
sumber
Saya kesulitan mendeteksi pengisian otomatis di Firefox. Ini adalah satu-satunya solusi yang bekerja untuk saya:
Demo
HTML:
CSS:
JavaScript:
Untuk Chrome saya menggunakan:
if ($(this).css('animation-name') == 'onAutoFillStart')
Untuk Firefox:
if ($(this).val() != '')
sumber
coba di CSS
input:-webkit-autofill { border-color: #9B9FC4 !important; }
sumber