Formulir pengisian otomatis Google Chrome dan latar belakang kuningnya

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:

Bagaimana cara menghapus latar belakang itu atau menonaktifkan autofill ini?

Ubah "putih" ke warna yang Anda inginkan.

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

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;
}

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);
        });
    });
}

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.

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.)

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

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 .

Sedikit berantakan tetapi berfungsi dengan baik untuk saya

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

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>

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);                                               


    }
});

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);
}

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.

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 */

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.

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;
}

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);
    });
}

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.

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

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

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

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');

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);});

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">

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;
}

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.

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;
}

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);
    }
});

<input type="text" name="foo" autocomplete="off" />

Pertanyaan Serupa: Tautan

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

form :focus {
  outline: none;
}