Formulir pengisian otomatis Google Chrome dan latar belakang kuningnya

245

Saya memiliki masalah desain dengan Google Chrome dan fungsi pengisian otomatis bentuknya. Jika Chrome mengingat beberapa login / kata sandi, ia mengubah warna latar belakang menjadi kuning.

Berikut beberapa tangkapan layar:

teks alternatif teks alternatif

Bagaimana cara menghapus latar belakang itu atau menonaktifkan autofill ini?

hsz
sumber
4
Saya juga ingin melihat apakah ada jawaban untuk ini.
Kyle
12
Untuk gaya, warna ini bisa serius dengan elemen desain, seperti garis besar pada tag input di Chrome juga, saya lebih ingin mengubah warna daripada mematikannya.
Kyle
3
Google tampaknya mengakui masalah ini sampai taraf tertentu. Lihat code.google.com/p/chromium/issues/detail?id=46543
MitMaro
1
Untuk menonaktifkan pelengkapan otomatis, Anda dapat menambahkan pelengkapan otomatis = "off" ke elemen input Anda, mis. <Input type = "text" id = "input" autocomplete = "off">
joe_young
1
Hanya info tambahan: Saya digigit oleh ini ketika saya memiliki bidang kata sandi. Saya mendapatkan bidang saya disorot secara otomatis (kuning) dan diisi dengan nilai aneh. Dan saya menemukan solusinya di sini: zigpress.com/2014/11/22/stop-chrome-messing-forms ... Solusinya ada di bagian yang bertuliskan "Nonaktifkan IsiOtomatis Google Chrome" ... tambahkan bidang tersembunyi.
Cokorda Raka

Jawaban:

282

Ubah "putih" ke warna yang Anda inginkan.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
Fareed Alnamrouti
sumber
4
ide yang hebat. Saya akan tetap dengan 50 atau 100 setiap kali cukup (kotak input ukuran biasa) untuk menghindari potensi kinerja hit pada perangkat yang lebih lemah. (Dan tidak perlu untuk px setelah 0)
Frank Nocke
4
Cinta hack ini! Pemikiran yang bagus ... Semua orang menghapus autofill. Saya ingin terus mengisi otomatis hanya dengan naik dari kuning jelek.
Travis
1
Tidak berfungsi jika Anda memiliki gambar latar belakang di belakang bidang input Anda, cukup isi seluruh area dengan warna putih. Saya mencoba semua solusi pada halaman ini, termasuk yang berbasis jquery dan mereka tidak bekerja untuk saya, pada akhirnya saya harus menambahkan autocomplete = "off" ke lapangan.
Myke Black
19
Untuk juga memberi gaya pada warna teks, gunakan -webkit-text-fill-color- lihat pertanyaan ini
Erwin Wessels
2
ada kesalahan, saya tidak mungkin sintaks berubah tetapi ini bekerja sekarang:box-shadow: inset 0 0 0 1000px white !important;
Muhammad Umer
49

Jika Anda ingin bidang input transparan, Anda dapat menggunakan transisi dan penundaan transisi.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}
Gísli Freyr Svavarsson
sumber
Solusi terbaik bagi saya karena nilai warna RGBA tidak berfungsi -webkit-box-shadow. Juga menghilangkan kebutuhan untuk memberikan nilai warna untuk deklarasi ini: nilai-nilai default akan tetap berlaku.
Sébastien
bahkan lebih baik adalah menggunakan penundaan transisi daripada durasinya, untuk tidak memiliki pencampuran warna sama sekali
antoine129
bagus tapi untuk beberapa alasan saya harus memindahkan aturan ini di akhir file, jika tidak tidak berfungsi
Igor Mizak
Itu yang saya cari! Terima kasih!
Akhmedzianov Danilian
43

Solusi di sini :

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}
Alessandro Benedetti
sumber
Ini berhasil sedangkan jawaban atas tidak. Namun saya pikir saya tidak akan mencoba mengubah perilaku sejak a). ini adalah javascript sehingga ada sedetik di antara ia berfungsi dan tidak (sampai js dimuat) dan b). mungkin membingungkan pengguna chrome yang terbiasa dengan perilaku default.
TK123
3
Krom saya baru saja menerapkan kembali kuning ke input baru :(
Dustin Silk
Tolong jangan. Ini tidak akan berfungsi dengan kerangka JS apa pun, hanya untuk situs web statis.
Akhmedzianov Danilian
26

Di Firefox Anda dapat menonaktifkan semua pelengkapan otomatis pada formulir dengan menggunakan atribut autocomplete = "off / on". Demikian juga masing-masing item autocomplete dapat diatur menggunakan atribut yang sama.

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

Anda dapat menguji ini di Chrome karena seharusnya berfungsi.

Kinlan
sumber
7
Pembubutan autocomplete="off"tidak dapat diakses hari ini.
João
4
Sayangnya, solusi ini tidak lagi berfungsi di Chrome.
henrywright
1
Ini sangat tidak disarankan karena Anda tidak benar-benar menyelesaikan masalah sebenarnya di sini. alih-alih, Anda membuat yang baru dengan membuat frustasi pengguna karena mereka harus mengetikkan detail login mereka (mungkin) secara manual (jika mereka ingat apa itu)
xorinzor
25

Jika Anda ingin mempertahankan pengisian otomatis, serta data apa pun, penangan terlampir dan fungsionalitas yang melekat pada elemen input Anda, coba skrip ini:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
    var _interval = window.setInterval(function ()
    {
        var autofills = $('input:-webkit-autofill');
        if (autofills.length > 0)
        {
            window.clearInterval(_interval); // stop polling
            autofills.each(function()
            {
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }
    }, 20);
}

Itu polling sampai menemukan elemen isi ulang otomatis, klon mereka termasuk data dan peristiwa, kemudian memasukkan mereka ke DOM di lokasi yang sama dan menghapus yang asli. Itu berhenti jajak pendapat setelah itu menemukan untuk mengkloning karena isi ulang kadang-kadang mengambil satu detik setelah memuat halaman. Ini adalah variasi dari contoh kode sebelumnya, tetapi lebih kuat dan menjaga fungsionalitas sebanyak mungkin.

(Dikonfirmasi bekerja di Chrome, Firefox dan IE 8.)

Jason
sumber
6
Ini adalah satu-satunya solusi yang saya temukan berfungsi, TANPA menonaktifkan pelengkapan otomatis.
Xeroxoid
mungkin pengaturan interval tidak diperlukan karena pengisian otomatis chrome di window.load?
Timo Huovinen
2
Bekerja tanpa menghapus penyelesaian otomatis, solusi yang jauh lebih baik daripada yang dengan jutaan suara.
Ally
Solusi lain tidak bekerja untuk saya, bahkan yang paling terunggul, tetapi yang ini berhasil. Masalahnya, yang merupakan kebalikan dari apa yang @Timo katakan di atas, adalah bahwa Chrome tidak mengisi ulang secara otomatis di window.load. Meskipun ini berhasil, satu masalah dengan itu adalah bahwa jika tidak ada elemen -webkit-autofill, loop terus berjalan. Anda bahkan tidak perlu jeda agar ini berfungsi. Cukup atur batas waktu mungkin dengan penundaan 50 milidetik dan itu akan berfungsi dengan baik.
Gavin
16

CSS berikut menghapus warna latar belakang kuning dan menggantinya dengan warna latar belakang yang Anda pilih. Itu tidak menonaktifkan isi-otomatis dan tidak memerlukan hack jQuery atau Javascript.

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

Solusi disalin dari: Override pengisian formulir dan sorotan input dengan HTML / CSS

humbad
sumber
Tidak bermain dengan baik jika bidang menerapkan beberapa bayangan.
Memukul kompetensi saya
6

Bekerja untuk saya, hanya perubahan css yang diperlukan.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

Anda dapat menempatkan warna apa pun sebagai pengganti #ffffff .

Milan
sumber
3

Sedikit berantakan tetapi berfungsi dengan baik untuk saya

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
maximilianhp
sumber
3

Kombinasi jawaban berhasil untuk saya

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>
LeRoy
sumber
Ini adalah satu-satunya contoh yang berfungsi untuk saya dengan teks dan latar belakang pada Versi Chrome 53.0.2785.116 m
pleshy
2

Berikut adalah versi MooTools dari Jason. Memperbaikinya di Safari juga.

window.addEvent('domready',function() { 
    $('username').focus();

    if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
    {

        var _interval = window.setInterval(function ()
        {
            var autofills = $$('input:-webkit-autofill');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,'after');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});
Orang kepercayaan
sumber
1
Jangan gunakan skrip ini. Jika tidak ada elemen autofilled, loop akan terus berjalan pada 20 milidetik. Interval tidak perlu. Atur batas waktu setelah jendela. Muat di sekitar 50 milidetik dan itu akan banyak waktu untuk menghapus penataan.
Gavin
2

Ini memperbaiki masalah pada Safari dan Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}
Arjan
sumber
Apakah yang berhasil untuk saya. Tapi BUG masih ada, dan seperti yang bisa dilihat, tidak ada tanggal untuk diperbaiki. code.google.com/p/chromium/issues/detail?id=46543#c22
Eduardo M
Anda tidak pernah menghapus interval Anda. Ini kode ceroboh, jangan gunakan itu.
Gavin
1
Sebenarnya ini tidak berhasil. Saya tidak bisa mengetik apa pun di input karena mereka terus-menerus dikloning. hampir sampai ...
Dustin Silk
coba ini var id = window.setInterval (function () {$ ('input: -webkit-autofill'). masing-masing (function () {var clone = $ (this) .clone (true, true); $ (ini) .after (clone) .remove ();});}, 20); $ ('input: -webkit-autofill'). focus (function () {window.clearInterval (id);});
Dustin Silk
2

Ini membantu saya, versi hanya CSS.

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

di mana putih bisa menjadi warna yang Anda inginkan.

Matt Goo
sumber
2

Saya menggunakan ini,

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */
Bhavesh Gangani
sumber
1

Di tag Anda, cukup masukkan baris kode kecil ini.

autocomplete="off"

Namun, jangan letakkan ini di bidang nama pengguna / email / idname karena jika Anda masih mencari untuk menggunakan pelengkapan otomatis, ini akan menonaktifkannya untuk bidang ini. Tapi saya menemukan jalan keluarnya, cukup tempatkan kode pada tag input kata sandi Anda karena Anda tidak pernah mengisi kata sandi secara otomatis. Perbaikan ini harus menghapus kekuatan warna, matinain kemampuan autocomplete pada bidang email / nama pengguna Anda, dan memungkinkan Anda untuk menghindari peretasan besar seperti Jquery atau javascript.

Alex Sarnowski
sumber
1

Jika Anda ingin sepenuhnya menghilangkannya, saya telah menyesuaikan kode pada jawaban sebelumnya sehingga berfungsi pada hover, aktif, dan juga fokus:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}
Alex
sumber
1
menambahkan !importantdiperlukan tetapi terima kasih, ini membantu saya banyak.
Polochon
0

Inilah solusi Mootools yang melakukan hal yang sama dengan Alessandro's - menggantikan setiap input yang terpengaruh dengan yang baru.

if (Browser.chrome) {
    $$('input:-webkit-autofill').each(function(item) {
        var text = item.value;
        var name = item.get('name');
        var newEl = new Element('input');
        newEl.set('name', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}
Dan akhirnya
sumber
0

Bagaimana dengan solusi itu:

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

Ini mematikan pengisian-otomatis dan pengisian-otomatis (latar belakang kuning menghilang), menunggu 100 milidetik dan kemudian mengembalikan fungsi pengisian-otomatis tanpa pengisian-otomatis.

Jika Anda memiliki input yang perlu diisi otomatis, berikan auto-complete-onkelas css.

menangis
sumber
0

Tidak ada solusi yang berfungsi untuk saya, input nama pengguna dan kata sandi masih diisi dan diberi latar belakang kuning.

Jadi saya bertanya pada diri sendiri, "Bagaimana cara Chrome menentukan apa yang harus diisi otomatis pada halaman tertentu?"

"Apakah itu mencari id input, nama input? Form id? Form action?"

Melalui eksperimen saya dengan nama pengguna dan input kata sandi, hanya ada dua cara yang saya temukan yang akan menyebabkan Chrome tidak dapat menemukan bidang yang harus diisi otomatis:

1) Letakkan input kata sandi di depan input teks. 2) Beri mereka nama dan id yang sama ... atau tidak ada nama dan id.

Setelah halaman dimuat, dengan javascript Anda dapat mengubah urutan input pada halaman, atau secara dinamis memberi mereka nama dan id mereka ...

Dan Chrome tidak tahu apa yang menimpanya ... pelengkapan otomatis tidak aktif.

Retas gila, saya tahu. Tapi itu berhasil untukku.

Chrome 34.0.1847.116, OSX 10.7.5

i_a
sumber
0

Satu-satunya cara yang bekerja untuk saya adalah: (diperlukan jQuery)

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

Saya memperbaiki masalah ini untuk bidang kata sandi yang saya miliki seperti ini:

Setel jenis input ke teks, bukan kata sandi

Hapus nilai teks input dengan jQuery

Ubah tipe input menjadi kata sandi dengan jQuery

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');
Ahmad Ajmi
sumber
Tidak berfungsi di Chrome. Segera setelah bidang menjadi type = kata sandi, Chrome mengisinya di
mowgli
0

Pembaruan untuk solusi Arjans. Ketika mencoba mengubah nilai-nilai itu tidak akan membiarkan Anda. Ini berfungsi baik untuk saya. Ketika Anda fokus pada input maka itu akan menjadi kuning. cukup dekat.

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        var id = window.setInterval(function(){
            $('input:-webkit-autofill').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
    }
});

$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
Sutra Dustin
sumber
0

Coba kode ini:

 	$(function(){
   		setTimeout(function(){
   			$('[name=user_password]').attr('type', 'password');
   		}, 1000);
   	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">

Андрій Глущенко
sumber
0

jawaban namrouti tarif sudah benar. Namun latar belakang masih menjadi kuning ketika input dipilih . Menambahkan !importantmemperbaiki masalah. Jika Anda ingin juga textareadan selectdengan perilaku yang sama tambahkan sajatextarea:-webkit-autofill, select:-webkit-autofill

Hanya input

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

masukan, pilih, textarea

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}
Merlin
sumber
0

Menambahkan autocomplete="off"tidak akan memotongnya.

Ubah atribut tipe input menjadi type="search".
Google tidak menerapkan pengisian otomatis pada input dengan jenis pencarian.

Semoga ini menghemat waktu Anda.

Matas Vaitkevicius
sumber
0

Jika Anda ingin menghindari kedipan kuning sampai css Anda diterapkan, tampar transisi pada bocah nakal itu seperti:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}
Sebastian
sumber
-1

Solusi terakhir:

$(document).ready(function(){
    var contadorInterval = 0;
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
    {
        var _interval = window.setInterval(function ()
        {
            var autofills = $('input:-webkit-autofill');
            if (autofills.length > 0)
            {
                window.clearInterval(_interval); // stop polling
                autofills.each(function()
                {
                    var clone = $(this).clone(true, true);
                    $(this).after(clone).remove();
                    setTimeout(function(){
//                        $("#User").val('');
                        $("#Password").val('');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('');
            $("#Password").val('');
        },100);
    }
});
Charly Novoa
sumber
-2
<input type="text" name="foo" autocomplete="off" />

Pertanyaan Serupa: Tautan

Aditya P Bhatt
sumber
chrome mengabaikan autocomplete = "off"
Sven van den Boogaart
Nonaktifkan Autocomplete di Google Chrome: <a href=" browsers.about.com/od/googlechrome/ss/...>
Aditya P Bhatt
-5

Baru saja menemukan diri saya dengan pertanyaan yang sama. Ini bekerja untuk saya:

form :focus {
  outline: none;
}

sumber
3
itulah garis besar pada kotak ketika Anda mengklik di dalamnya, bukan warna latar belakang input otomatis
Claire