Google Chrome form otomatik doldurma ve sarı arka planı

Google Chrome ve form otomatik doldurma işleviyle ilgili tasarım sorunum var. Chrome bazı girişleri / şifreleri hatırlarsa arka plan rengini sarıya değiştirir.

İşte bazı ekran görüntüleri:

Bu arka planı nasıl kaldırırım veya yalnızca bu otomatik doldurmayı devre dışı bırakabilirsiniz?

"Beyaz" ı istediğiniz renge değiştirin.

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

Saydam giriş alanları istiyorsanız geçiş ve geçiş gecikmesini kullanabilirsiniz.

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

Burada çözüm :

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

Firefox'ta, formdaki tüm otomatik tamamlamayı autocomplete = "off / on" özelliğini kullanarak devre dışı bırakabilirsiniz. Benzer şekilde, otomatik tamamlama öğelerinin her biri aynı özellik kullanılarak ayarlanabilir.

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

Bunu çalışması gerektiği için Chrome'da test edebilirsiniz.

Otomatik doldurmanın yanı sıra, giriş öğelerinize eklenen tüm verileri, ekli işleyicileri ve işlevleri korumak istiyorsanız, şu komut dosyasını deneyin:

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

Otomatik doldurma öğelerini bulana kadar yoklar, veri ve olaylar da dahil olmak üzere bunları klonlar, sonra bunları aynı konuma DOM içine ekler ve orijinali kaldırır. Otomatik doldurma bazen sayfa yüklendikten sonra bir saniye sürdüğünden, klonlanacak herhangi bir şey bulduğunda yoklamayı durdurur. Bu, önceki bir kod örneğinin bir varyasyonudur, ancak daha sağlamdır ve işlevselliği olabildiğince sağlam tutar.

(Chrome, Firefox ve IE 8'de çalıştığı onaylandı.)

Aşağıdaki CSS sarı arka plan rengini kaldırır ve seçtiğiniz bir arka plan rengiyle değiştirir. Otomatik doldurmayı devre dışı bırakmaz ve jQuery veya Javascript kesmek gerektirmez.

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

Kopyalanan çözüm: HTML / CSS ile tarayıcı form doldurmayı ve giriş vurgulamayı geçersiz kıl

Benim için çalıştı, sadece css değişikliği gerekli.

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

#ffffff yerine herhangi bir renk koyabilirsiniz .

Biraz hacky ama benim için mükemmel çalışıyor

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

Cevapların bir kombinasyonu benim için çalıştı

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

İşte Jason'ın MooTools versiyonu. Safari'de de düzeltir.

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


    }
});

Bu, hem Safari'de hem de Chrome'da sorunu giderir

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

Bu sadece CSS versiyonu bana yardımcı oldu.

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

nerede beyaz istediğiniz herhangi bir renk olabilir.

Bunu kullanıyorum,

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

Etiketinize, bu küçük kod satırını eklemeniz yeterlidir.

autocomplete="off"

Bununla birlikte, bunu kullanıcı adı / e-posta / kimlik adı alanına yerleştirmeyin, çünkü otomatik tamamlamayı kullanmak istiyorsanız, bu alan için devre dışı bırakacaktır. Ancak bunun bir yolunu buldum, sadece şifreyi otomatik olarak tamamlamadığınız için kodu şifre giriş etiketinize yerleştirin. Bu düzeltme, e-posta / kullanıcı adı alanınızdaki renk kuvvetini, matinain otomatik tamamlama özelliğini kaldırmalı ve Jquery veya javascript gibi hantal saldırıları önlemenizi sağlar.

Ondan tamamen kurtulmak istiyorsanız, önceki cevaplardaki kodu ayarladım, böylece hover, aktif ve odakta çalışıyor:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

İşte Alessandro ile aynı şeyi yapan bir Mootools çözümü - etkilenen her girişi yenisiyle değiştirir.

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

Peki ya bu çözüm:

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

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

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

Otomatik tamamlama ve otomatik doldurmayı kapatır (böylece sarı arka planlar kaybolur), 100 milisaniye bekler ve ardından otomatik tamamlama işlevini otomatik doldurma olmadan geri döndürür.

Otomatik doldurulması gereken girdileriniz varsa, onlara auto-complete-oncss sınıfı verin .

Çözümlerin hiçbiri benim için işe yaramadı, kullanıcı adı ve şifre girişleri hala dolduruluyordu ve sarı arka plan verildi.

Bu yüzden kendime, "Chrome belirli bir sayfada neyin otomatik olarak doldurulması gerektiğini nasıl belirler?" Diye sordum.

"Giriş kimlikleri mi, giriş adları mı görünüyor? Form kimlikleri mi? Form eylemi?"

Kullanıcı adı ve şifre girişleriyle yaptığım deneyler sayesinde, Chrome'un otomatik olarak doldurulması gereken alanları bulamamasına neden olacak iki yol vardı:

1) Şifre girişini metin girişinin önüne koyun. 2) Onlara aynı isim ve kimliği verin ... veya isim ve kimlik vermeyin.

Sayfa yüklendikten sonra, javascript ile sayfadaki girişlerin sırasını değiştirebilir veya dinamik olarak adlarını ve kimliklerini verebilirsiniz ...

Chrome neyin vurduğunu bilmiyor ... otomatik tamamlama kapalı kalıyor.

Çılgın kesmek, biliyorum. Ama benim için çalışıyor.

Krom 34.0.1847.116, OSX 10.7.5

Benim için çalışmanın tek yolu şuydu: (jQuery gerekli)

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

Ben böyle bir şifre alanı için bu sorunu çözdü:

Giriş türünü şifre yerine metne ayarlayın

JQuery ile giriş metni değerini kaldırın

Giriş türünü jQuery ile parolaya dönüştürün

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

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

Arjans çözümü için bir güncelleme. Değerleri değiştirmeye çalışırken size izin vermez. Bu benim için iyi çalışıyor. Bir girişe odaklandığınızda sarıya döner. yeterince yakın.

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

Bu kodu deneyin:

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

ücretli namrouti yanıtı doğrudur. Ancak giriş seçildiğinde arka plan hala sarı olur . Ekleme !importantsorunu düzeltin. İsterseniz textareave selectaynı davranışla sadece ekleyintextarea:-webkit-autofill, select:-webkit-autofill

Sadece giriş

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

girdi, seçme, metin

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

Eklemek autocomplete="off"kesmeyecek.

Giriş türü özelliğini olarak değiştirin type="search".
Google, bir tür arama içeren girişlere otomatik doldurma uygulamaz.

Umarım bu size biraz zaman kazandırır.

Css uygulanana kadar sarı titreşimden kaçınmak istiyorsanız, o kötü çocuk üzerinde bir geçiş yapın:

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

Son çözüm:

$(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" />

Benzer Soru: Bağlantı

Kendimi aynı soruyla buldum. Bu benim için çalışıyor:

form :focus {
  outline: none;
}