HTML / CSS ile tarayıcı form doldurma ve giriş vurgulamayı geçersiz kılma


139

İki temel formum var - oturum açın ve kaydolun, her ikisi de aynı sayfada. Şimdi, otomatik form doldurma oturum açma sorunum yok,ancak kayıt formu otomatik olarak doldurulur ve hoşuma gitmez.

Ayrıca, form stilleri geçersiz kılmayı başaramadığım sarı bir arka plan alır ve bunu yapmak için satır içi CSS kullanmak istemiyorum. Sarı renkli olmalarını engellemek için ne yapabilirim?ve (muhtemelen) otomatik doldurma? Şimdiden teşekkürler!


4
Burada gerçekten iki soru soruyorsunuz: Otomatik form doldurma nasıl devre dışı bırakılır? Otomatik doldurma etkinleştirildiğinde sarı arka plan nasıl geçersiz kılınır? Aşağıdaki cevaplardaki tüm yorumları okuyana kadar bu net değildi. Sorunuzu düzenlemeyi düşünebilirsiniz (özellikle bir ödül sunmaya kadar gittiğiniz için).
benzado

Haklısın, düzenlendi. Ya da yine de tembel bir versiyonu.
casraf

1
Formun bir kullanıcısı olarak, otomatik tercihleri ​​zorlayarak ve vurgulayarak görsel tercihleriniz nedeniyle kullanılabilirliğimi sakatlamaktan nefret ederim. Kullanıcının bunu kapatmasına izin verin, siz değil. Göz atma deneyimimi rahat bırak.
Byran Zaugg

Aslında, KAYIT formunda otomatik tamamlamayı devre dışı bıraktım, bu da temel olarak düzenli otomatik tamamlamaya sahip olmamalı, tamamlama bilgileri yalnızca kaydolduktan sonra oluşturulur. Giriş formuna gelince, otomatik tamamlamayı açık tutmak istiyorum, ancak giriş alanlarına koyduğu aptal rengi devre dışı bırakıyorum çünkü içerideki metin okunamıyor - arka plan sarı ve metin rengi beyaz (orijinal arka plan koyu gri) .
casraf

Yanıtlar:


163

otomatik tamamlama için şunları kullanabilirsiniz:

<form autocomplete="off">

renklendirme sorunu ile ilgili:

ekran görüntünüzden webkit'in aşağıdaki stili oluşturduğunu görebiliyorum:

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1) # id-stilleri daha da önemli .class stilleri daha oldukları gibi, şu olabilir çalışır:

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) Bu işe yaramazsa, stili programlı olarak javascript aracılığıyla ayarlamayı deneyebilirsiniz

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3) Bu işe yaramazsa, mahkumsun :-) Bunu düşünün: Bu sarı rengi gizlemeyecek, ancak metni tekrar okunabilir hale getirecektir.

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4) CSS / Javascript çözümü:

css:

input:focus {
    background-position: 0 0;
}

ve aşağıdaki javascript onload çalıştırılmalıdır:

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

Örneğin:

<body onload="loadPage();">

iyi şanslar :-)

5) Yukarıdaki çalışmaların hiçbiri giriş öğelerini kaldırmayı, klonlamayı ve ardından klonlanmış öğeleri tekrar sayfaya yerleştirmeyi deneyin (Safari 6.0.3'te çalışır):

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6) Gönderen burada :

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

(1) çalışmıyor. Eve döndüğümde (2) deneyeceğim; umarım JS bunu geçersiz kılabilir; teşekkürler :)
casraf

1
(4) kesinlikle sarı kaldırır: odak sınırı.
ruruskyi

Son bit sizin için işe yaramazsa ve javascript'in nasıl çalıştığını biliyorsanız (Id'nin hakkını aldım vb.) Sahip olduğum sorun olabilir, bazı nedenlerden dolayı jquery mobile kullanıyorum ve bu daha sonra başlatılıyor ve girdileri değiştiriyor anlaşılan. Yani yaptığım şey her 50 ms'de klonlayan bir aralık ayarlamak (setTimeout kullanarak 400 ms sonra çalıştı ama yavaş bağlantıları riske atmak istemiyorum). Ve bir saniye sonra aralık kaldırılır:code
Mathijs Segers

var keepTheInputCloned = setInterval(function(){ var e = document.getElementById('id_email'); var ep = e.parentNode; ep.removeChild(e); var e2 = e.cloneNode(); ep.appendChild(e2); var p = document.getElementById('id_password'); var pp = p.parentNode; pp.removeChild(p); var p2 = p.cloneNode(); pp.appendChild(p2); },50); setTimeout(function(){clearInterval(keepTheInputCloned)},1000);
Mathijs Segers

Mavericks'teki Safari ile benzer bir sorun yaşıyorum. Ancak yöntem 5'i kullandığımda, bir saniye boyunca (veya zaman aşımını 3000'e ayarladığımda üç saniye) fırlatıyorlar ve sonra tarayıcı kazanıyor ve otomatik tamamlama özelliğini açtım. Kullanım durumumda, kullanıcıdan başka bir site için kullanıcı adını / şifresini soruyorum, böylece diğer siteden bilgi alabilirim, bu yüzden kesinlikle sitem için kullandıkları kullanıcı adını ve şifreyi otomatik olarak doldurmasını istemiyorum. Bununla ilgili herhangi bir düşünce (orijinal # 3'ün kıyametinin yanı sıra)?
Jack RG

218

"Güçlü" bir gölge ile kandırın:

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: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
} 

10
Bu gerçekten zekice. :)
Jordan Gray

3
+1000 (eğer yapabilirsem) Evet bunu yapmanın başka bir yolunu bulamıyorum. Bu webkit gerçekten müdahaleci ...
o_O

1
harika bu basit ve etkili bir numaralı cevap olmalıdır
Pixelomo

3
Bu harika çalışıyor ve gerçekten yaratıcı. Ama bana eski IE6 kesmek ve benzeri hatırlatıyor. Bize biraz: - web kiti-autofill parametresi vermek ve tasarımcıların varsayılanı geçersiz kılmalarına izin vermemek için biraz daha berbat, değil mi?
squarecandy

1
Özelleştirilemeyen bir renk seçeneği sunmak, kullanılabilirliğe veya erişilebilirliğe yardımcı olmaz. Bu endişeler, Chrome'daki bu sinir bozucu hack dışında, tamamen geliştiricinin elinde. Hiç kimse Chrome geliştiricilerinin amacını bozamaz, sadece sonuçlar.
Lunster

25

Bu CSS kuralını ekleyin, sarı arka plan rengi kaybolur. :)

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

1
Bu benim için çalıştı - teşekkürler! (beyazı aslında istediğim renge dönüştürmem gerekiyordu)
jennEDVT

2
Açıkçası en iyi cevap.
Brandon Harris

16
<form autocomplete="off">

Hemen hemen tüm modern tarayıcılar buna saygı duyacaktır.


7
Harika, ama sadece daha az önemli sorunu çözüyor; nasıl otomatik tamamlayabilirim ama tarzı ( prntscr.com/4hkh ) webkit boğazını aşağı iter kaybetmek nasıl ? o: teşekkürler olsa da
casraf

1
Aslında her ikisini de yapmalı. Kutu yalnızca, krom / safari / ff'nin şifrenizle otomatik olarak doldurduğunu bildirmek için sarıya döner. Doldurmamasını söylerseniz, renklendirmek için bir şans olmaz.
Jason Kester

11
evet, ama ne
dediğime

Tek sorun, autocompletesürüm 5'ten önce HTML'de geçersiz olmasıdır.
Paul

15

2 saatlik aramadan sonra Google Chrome hala sarı rengi bir şekilde geçersiz kılıyor gibi görünüyor, ancak düzeltmeyi buldum. Fareyle üzerine gelme, odaklanma vb. İçin de çalışır. Tek yapmanız gereken ona eklemek !important.

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

bu, giriş alanlarından sarı rengi tamamen kaldıracaktır


1000 piksel olmadan benim için çalışıyor, sadece 0 her yerde, -webkit-box-shadow: 0 0 0 0 beyaz iç metin! Önemli;
Luis Lopez

3

Ayrıca, form öğelerinizin ad özniteliğini, tarayıcının bunu izlememesi için oluşturulan bir şey olacak şekilde değiştirebilirsiniz. ANCAK firefox 2.x + ve google chrome, istek URL'si aynıysa bununla ilgili çok fazla sorun yaşamıyor gibi görünüyor. Temel olarak kayıt formu için bir tuz isteği parametresi ve bir tuz alanı adı eklemeyi deneyin.

Ancak ben autocomplete = "kapalı" hala en iyi çözüm olduğunu düşünüyorum :)


3

HTML5'ten (üzerinden autocomplete="off") otomatik tamamlamayı devre dışı bırakabilirsiniz , ancak tarayıcının vurgulamasını geçersiz kılamazsınız. ::selectionCSS'de mesajlaşmayı deneyebilirsiniz (çoğu tarayıcı bunun çalışması için bir satıcı öneki gerektirir), ancak bu muhtemelen size yardımcı olmaz.

Tarayıcı satıcısı, özellikle satıcıya özel bir şekilde geçersiz kılma yöntemini uygulamadığı sürece, sitenin kullanıcı için stil sayfasını geçersiz kılmayı amaçlayan bu stiller hakkında hiçbir şey yapamazsınız. Bunlar genellikle stil sayfalarınız uygulandıktan sonra uygulanır ve ! importantgeçersiz kılmaları da yok sayar.


3

Bazen öğedeki kodunuz olduğunda tarayıcıdaki otomatik tamamlama yine de otomatik olarak tamamlanır <form>.

Öğeye de koymayı denedim <input>ve daha iyi çalıştı.

<form autocomplete="off">  AND  <input autocomplete="off">

Ancak bu özellik için destek kesiliyor, lütfen https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1 adresini okuyun.

https://bugzilla.mozilla.org/show_bug.cgi?id=956906


Bulduğum başka bir çalışma, giriş alanlarının içine bir e-posta, kullanıcı adı veya telefon alanı olduğunu (yani "E-postanız", "E-posta" vb.) Öneren yer tutucuları çıkarmaktır.

resim açıklamasını buraya girin

Bu, tarayıcıların ne tür bir alan olduğunu bilmemesini sağlar, böylece alanı otomatik olarak tamamlamaya çalışmaz.


Bu konuda ne gibi çoğu insan bir sayfa yeniden yükleme (örneğin uzun bir metin alanı) doldurulmamış tüm formu takdir, ancak geliştirici belirli öğelerin doldurulmasını önlemek için izin verir (örneğin banka kartı numarası). Rahatsız edici olsa da, bu özellik için destek
kesiliyor

1

Eğer giriş alanındaysa "sararmaya" çalışıyorsunuz ...

  1. Css ile bir arka plan rengi ayarlayın ... diyelim ki #ccc (açık gri).
  2. Alanı geçici olarak "sometext" ile dolduran value = "sometext" ekle
  3. (isteğe bağlı) Gerçek metni koymaya gittiğinizde "sometext" i temizlemek için biraz javascript ekleyin.

Yani, şöyle görünebilir:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />

1

Bu, hem Safari hem de Chrome'daki 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);
}

1
İnanıyorum ama bunu saniyede 50 kez yapmak biraz zor olmaz mıydı? Çalışacağını biliyorum ve çok yavaş olmayacak. Ama biraz fazla görünüyor.
Mathijs Segers

0

Bağlandığınız ekran görüntüsü, WebKit'in input:-webkit-autofillbu öğeler için seçici kullandığını söylüyor . Bunu CSS'nize koymayı denediniz mi?

input:-webkit-autofill {
    background-color: white !important;
}

Bu işe yaramazsa, muhtemelen hiçbir şey işe yaramaz. Bu alanlar, kullanıcıyı özel bilgilerle (kullanıcının ev adresi gibi) otomatik olarak doldurulduğuna dair uyarmak için vurgulanır ve bir sayfanın gizlenmesine izin vermenin güvenlik riski oluşturduğu iddia edilebilir.


0

formTüründe bir autocompletesen olarak ayarlanmış olabilir niteliği off. CSS'den itibaren !importantbir mülkten sonraki yönerge mülkün geçersiz kılınmasını engeller:

background-color: white !important;

Sadece IE6 bunu anlamıyor.

Seni yanlış anladıysam, outlineyararlı bulabileceğin bir özellik de var.


2
Chrome, giriş alanlarını otomatik olarak
doldurduğunda

@Torandi Bunun nedeni kullanıcı aracısı stil sayfaları olabilir. Kullanıcı aracısı stil sayfalarındaki ayarlar, !importantyönerge olmadığı sürece son olarak uygulanmalıdır , bu durumda diğer her şeyden önce gelir. Kullanıcı aracısı stil sayfanızı kontrol etmelisiniz (nerede bulacağımı bilmiyorum).
Ocak'ta

0

Google araç çubuğunun otomatik tamamlama özelliğinin javascript ile devre dışı bırakıldığını gördüm. Diğer bazı otomatik doldurma araçlarıyla çalışabilir; Otomatik tamamlamada yerleşik tarayıcılara yardımcı olup olmayacağını bilmiyorum.

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>

0

Bir çok şeyi denedikten sonra, otomatik olarak doldurulmuş alanları çağıran ve bunları çoğaltılmış olanlarla değiştiren çalışma çözümleri buldum. Ekli olayları kaybetmek için değil, başka bir (biraz uzun) çözüm ile geldi.

Her bir "girdi" olayında, ilgili tüm girdilere hızla "değişiklik" olayları ekler. Otomatik olarak doldurulup doldurulmadığını test eder. Evetse, değerin kullanıcı tarafından değiştirildiğini düşünmek için tarayıcıyı kandıracak ve böylece sarı arka planın kaldırılmasına izin verecek yeni bir metin etkinliği gönderin.

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});

0

Tüm tarayıcılar için basit javascript çözümü:

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

Girişi klonlayın, özelliği sıfırlayın ve orijinal girişi gizleyin. İPad için zaman aşımı gerekiyor


0

Tarayıcı şifre türü alanlarını aradığından başka bir geçici çözüm, formunuzun başına gizli bir alan eklemektir:

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />

0

Çok fazla konu okudum ve çok fazla kod parçası denedim. Tüm bunları topladıktan sonra, giriş ve şifre alanlarını temiz bir şekilde boşaltmanın ve arka planlarını beyaza sıfırlamanın tek yolu şuydu:

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

Yorum yapmaktan çekinmeyin, bulursanız tüm geliştirmelere açıldım.


0

Otomatik tamamlama özelliği modern tarayıcılar tarafından desteklenmez. Bulduğum otomatik tamamlamayı çözmenin en kolay yolu HTML ve JS ile küçük bir parça oldu. Yapılacak ilk şey HTML'deki girişin türünü 'şifre'den' metin 'olarak değiştirmek.

<input class="input input-xxl input-watery" type="text" name="password"/>

Otomatik tamamlama, pencere yüklendikten sonra başlar. Bu iyi. Ancak alanınızın türü 'şifre' olmadığında, tarayıcı hangi alanları doldurması gerektiğini bilmiyordu. Bu nedenle, form alanlarında otomatik tamamlama olmaz.

Bundan sonra, olay alanını şifre alanına odaklayın, örn. Omurgada:

'focusin input[name=password]': 'onInputPasswordFocusIn',

İçinde onInputPasswordFocusIn, basit kontrolle alanınızın türünü şifreyle değiştirmeniz yeterlidir:

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

Hepsi bu kadar!

UPD: Bu şey devre dışı bırakılmış JavaSciprt ile çalışmaz

Ayrıca bazı komik hileler de bulundu. Giriş alanına salt okunur özniteliği ayarlayın ve odak olayından kaldırın. Öncelikle tarayıcının alanları otomatik doldurmasını önleyin, ikincisi veri girişine izin verir.


Eh otomatik tamamlama olduğunu 's kullanım ve uygulama değişebilir olsa standardının parçası. Ayrıca, IE'de girdi türlerini değiştirmek olağanüstü bir şekilde başarısız oluyor, bu nedenle jQuery bunu engelliyor, ancak IE geliştiricisini
Mozilla.org/en-US/docs/Web/Security/…

@casraf Üzgünüm, bu standardın bir parçası, ama olması gerektiği gibi tüm modern tarayıcılarda çalışmıyor, bu yüzden icat ettiği şeyi yapmayacak.
EDGE'de

Doğru, her yerde uygulanmadı. Sorun hala - IE'yi ne kadar geri desteklemek istediğinize bağlı olarak - v 11'den önce, giriş türünü değiştirebileceğinize inanmıyorum. Eski sürümlerden endişe etmiyorsanız autocomplete=off, önceki sürümden itibaren FF, Chrome ve IE'de çalıştığı için de kullanabilirsiniz
casraf

Autocomplete = off, girişler ve form için kullanmaya çalıştım ve Chrome hala kayıt ve oturum açma formları verilerini dolduruyor (. bazı değil =)
volodymyr3131

Biliyorum, bu standartlar tutarlı bir şekilde takip edilmiyor. Utanç verici, hayatımızı zorlaştırıyor :(
casraf

0

Lütfen giriş etiketinizde autocomplete = "none" ile deneyin

Bu benim için çalışıyor


0

Ayrıca metin rengini daha koyu bir şeye değiştirmek zorunda kaldım (bkz. StackOverflow koyu tema renkleri).

Böylece @ Tamás Pap, @MCBL ve @ don's çözümünün bir meleziyle sonuçlandı:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}

-3

Neden sadece css'nize koymuyorsunuz:

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

Bu, sorununuzla ilgilenmelidir. Kullanılabilirlik sorunu ortaya çıkmasına rağmen, şimdi kullanıcı formun alışık olduğu şekilde otomatik olarak doldurulduğunu göremiyor.

Bunu gönderdikten sonra benzer bir cevabın zaten verildiğini ve bunun işe yaramadığını yorumladığınızı gördüm . Nedenini tam olarak anlamıyorum çünkü test ettiğimde işe yaradı.


hem krom hem de safari için çalışmaz. stil var input:-webkit-autofillve input --webkit-autocompletesadece yok
ruruskyi

@EliseuMonar: Yalan söylemediğime eminim, ancak nasıl veya nerede test ettiğimin ayrıntılarını hatırlayamıyorum. Kodun kendisi muhtemelen bellekten yazılmıştır, kopyalanmamış / yapıştırılmamıştır, bu nedenle otomatik tamamlama ve otomatik doldurma? Bilmiyorum.
Kris

-3

Buradaki GERÇEK problem, Webkit'in (Safari, Chrome, ...) bir hatası olması. Sayfada birden fazla [form] varsa, her biri bir [input type = "text" name = "foo" ...] (yani 'name' özelliği için aynı değere sahip), ardından kullanıcı geri döndüğünde sayfaya otomatik doldurma gönderilen [form] 'da değil, sayfadaki İLK [form]' un giriş alanında yapılacaktır. İkinci kez, SONRAKİ [form] otomatik olarak doldurulur, vb. Yalnızca AYNI adıyla bir girdi metin alanına sahip [form] etkilenir.

Bu, Webkit geliştiricilerine bildirilmelidir.

Opera sağdaki [formu] otomatik olarak doldurur.

Firefox ve IE otomatik olarak doldurulmaz.

Tekrar söylüyorum: Bu Webkit'te bir hata.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.