Zastąp wypełnianie formularzy w przeglądarce i podświetlanie danych wejściowych za pomocą HTML / CSS

139

Mam 2 podstawowe formularze - zaloguj się i zarejestruj, oba na tej samej stronie. Teraz nie mam problemu z autouzupełnianiem formularza logowania,ale formularz rejestracji automatycznie się wypełnia i nie podoba mi się to.

Ponadto style formularzy mają żółte tło, którego nie mogę przesłonić i nie chcę do tego używać wbudowanego CSS. Co mogę zrobić, aby przestały być pomalowane na żółtoi (prawdopodobnie) automatyczne napełnianie? Z góry dziękuję!

casraf
źródło
4
Naprawdę zadajesz tutaj dwa pytania: Jak wyłączyć autouzupełnianie formularzy? -ORAZ- Jak zastąpić żółte tło, gdy włączone jest autouzupełnianie formularzy? Nie było to jasne, dopóki nie przeczytałem wszystkich komentarzy w odpowiedziach poniżej. Możesz rozważyć edycję swojego pytania (zwłaszcza, że ​​posunąłeś się nawet do zaoferowania nagrody).
benzado
Masz rację, zredagowano. Lub w każdym razie leniwa wersja tego.
casraf
1
Jako użytkownik formularza nie chciałbym, aby moja użyteczność została sparaliżowana z powodu twoich preferencji wizualnych, wymuszając automatyczne uzupełnianie i wyłączanie podświetlania. Pozwól użytkownikowi to wyłączyć, nie ty. Zostaw moje przeglądanie w spokoju.
Byran Zaugg
O to chodzi, wyłączyłem autouzupełnianie tylko w formularzu REJESTRACJA, który w zasadzie nie powinien mieć regularnego autouzupełniania, informacje o ukończeniu są tworzone dopiero po zarejestrowaniu się. Jeśli chodzi o formularz logowania, chcę mieć włączone autouzupełnianie, ale po prostu wyłącz głupi kolor, który umieszcza na polach wejściowych, ponieważ tekst w środku staje się nieczytelny - tło jest żółte, a kolor tekstu jest biały (oryginalne tło jest ciemnoszare) .
casraf

Odpowiedzi:

163

do autouzupełniania możesz użyć:

<form autocomplete="off">

odnośnie problemu z kolorowaniem:

na twoim zrzucie ekranu widzę, że webkit generuje następujący styl:

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

1) ponieważ style # id są nawet ważniejsze niż style .class, poniższe mogą działać:

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

2) jeśli to nie zadziała, możesz spróbować programowo ustawić styl za pomocą javascript

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

3) jeśli to nie zadziała, jesteś skazany na porażkę :-) zastanów się: to nie ukryje żółtego koloru, ale sprawi, że tekst będzie znów czytelny.

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

4) rozwiązanie css / javascript:

css:

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

a następujący javascript musi zostać uruchomiony onload:

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

na przykład:

<body onload="loadPage();">

powodzenia :-)

5) Jeśli żadne z powyższych nie zadziała, spróbuj usunąć elementy wejściowe, sklonować je, a następnie umieścić sklonowane elementy z powrotem na stronie (działa w Safari 6.0.3):

<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) Stąd :

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);
        });
    });
}
Phil Rykoff
źródło
(1) nie działa. Spróbuję (2), kiedy wrócę do domu; miejmy nadzieję, że JS może to zmienić; dzięki :)
casraf
1
(4) zdecydowanie usuwa żółte: obramowanie ostrości.
ruruskyi
Jeśli ostatni bit nie działa, a wiesz, jak działa javascript (masz prawidłowy identyfikator itp.) Możesz mieć problem, który miałem, używam jquery mobile z kilku powodów, a to inicjuje się później i zastępuje dane wejściowe wydaje się. Więc to, co zrobiłem, to ustawić interwał, który klonuje go co 50 ms (działał po 400 ms przy użyciu setTimeout, ale nie chcę ryzykować powolnych połączeń). Po sekundzie przerwa została usunięta: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
Mam podobny problem z Safari na Mavericks. Ale kiedy stosuję metodę 5, wygaszają ją na jedną sekundę (lub trzy sekundy, gdy ustawię limit czasu na 3000), a następnie przeglądarka wygrywa i mam włączone autouzupełnianie. W moim przypadku proszę użytkownika o jego nazwę użytkownika / hasło do innej witryny, abym mógł pobrać informacje z innej witryny, więc zdecydowanie nie chcę, aby automatycznie uzupełniał nazwę użytkownika i hasło, którego używają w mojej witrynie. Jakieś przemyślenia na ten temat (poza zagładą oryginału # 3)?
Jack RG
218

Oszukać go „silnym” cieniem wewnętrznym:

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;
} 
Tamás Pap
źródło
10
To jest naprawdę sprytne. :)
Jordan Grey
3
+1000 (jeśli mógłbym) Tak, nie wyobrażam sobie innego sposobu, aby to zrobić. To jest naprawdę uciążliwe dla webkit ...
o_O
1
niesamowite, to powinna być odpowiedź numer jeden, prosta i skuteczna
Pixelomo
3
To jest niesamowite, ponieważ działa i jest naprawdę kreatywne. Ale przypomina mi stare hacki IE6 i tym podobne. Trochę bzdury z Google, aby podać nam parametr: -webkit-autofill i nie pozwolić projektantom na zastąpienie domyślnego, prawda?
squarecandy
1
Zapewnienie wyboru koloru, którego nie można dostosować, nie poprawia użyteczności ani dostępności. Te obawy są nadal całkowicie w rękach programisty, z wyjątkiem tego frustrującego hacka w Chrome. Nikt nie może winić zamiarów twórców Chrome, tylko wyniki.
Lunster
25

Dodaj tę regułę CSS, a żółty kolor tła zniknie. :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
MCBL
źródło
1
To zadziałało dla mnie - dzięki! (chociaż musiałem zmienić biały na kolor, który faktycznie chciałem)
jennEDVT
2
Zdecydowanie najlepsza odpowiedź.
Brandon Harris
16
<form autocomplete="off">

Prawie wszystkie współczesne przeglądarki to uszanują.

Jason Kester
źródło
7
Niesamowite, ale rozwiązuje tylko mniej ważny problem; jak mogę zachować autouzupełnianie, ale stracić styl ( prntscr.com/4hkh ) webkit wpycha się do gardła? o: dzięki
casraf
1
Właściwie to powinno zrobić jedno i drugie. Pole zmienia kolor na żółty, informując Cię, że chrome / safari / ff automatycznie wypełniło je Twoim hasłem. Jeśli powiesz mu, żeby się nie wypełniał, nie będzie miał szansy go pokolorować.
Jason Kester,
11
tak, ale spójrz na to, co powiedziałem: „Jak mogę zachować automatyczne uzupełnianie, ale stracić styl, który wypycha webkit”
casraf
Jedynym problemem autocompletejest to, że jest nieprawidłowy w HTML przed wersją 5.
Paul D. Waite
15

Po 2 godzinach wyszukiwania wydaje się, że Google Chrome nadal w jakiś sposób nadpisuje żółty kolor, ale znalazłem poprawkę. Będzie działać również przy najechaniu, skupieniu itp. Wszystko, co musisz zrobić, to dodać !importantdo tego.

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

spowoduje to całkowite usunięcie żółtego koloru z pól wejściowych

don
źródło
U mnie działa bez 1000px, wszędzie tylko 0, -webkit-box-shadow: 0 0 0 0 biała wstawka! Ważne;
Luis Lopez
3

Możesz również zmienić atrybut nazwy elementów formularza, aby był generowany, aby przeglądarka nie śledziła tego. JEDNAK firefox 2.x + i Google Chrome nie wydają się mieć z tym większych problemów, jeśli adres URL żądania jest identyczny. Spróbuj po prostu dodać parametr żądania soli i nazwę pola soli do formularza rejestracji.

Jednak myślę, że autocomplete = "off" jest nadal najlepszym rozwiązaniem :)

Dmitriy Likhten
źródło
3

Możesz wyłączyć automatyczne uzupełnianie od HTML5 (przez autocomplete="off"), ale NIE MOŻESZ zastąpić podświetlenia przeglądarki. Możesz spróbować bawić się ::selectionw CSS (większość przeglądarek wymaga prefiksu dostawcy, aby to zadziałało), ale to też prawdopodobnie nie pomoże.

O ile dostawca przeglądarki nie zaimplementował specyficznego dla dostawcy sposobu nadpisywania tego, nie możesz nic zrobić z takimi stylami, które już mają zastąpić arkusz stylów witryny dla użytkownika. Są one zwykle stosowane po zastosowaniu arkuszy stylów i ignorują również ! importantnadpisania.

Alan Plum
źródło
3

Czasami autouzupełnianie w przeglądarce nadal jest autouzupełniane, gdy masz tylko kod w <form>elemencie.

Próbowałem też włożyć to do <input>elementu i to działało lepiej.

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

Jednak wsparcie dla tego atrybutu dobiega końca, przeczytaj https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

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


Innym rozwiązaniem, które znalazłem, jest usunięcie symboli zastępczych w polach wejściowych, które sugerują, że jest to adres e-mail, nazwa użytkownika lub pole telefonu (np. „Twój e-mail”, „E-mail” itp.)

wprowadź opis obrazu tutaj

To sprawia, że ​​przeglądarki nie wiedzą, jakiego rodzaju jest to pole, a tym samym nie próbują go automatycznie uzupełniać.

andstud.io
źródło
To, co mi się w tym podoba, to to, że większość ludzi NIE BĘDZIE zadowolić, że cały formularz nie jest wypełniany przy przeładowywaniu strony (np. Długi obszar tekstowy), ale pozwala programistom zapobiec wypełnieniu niektórych elementów (np. Numer karty bankowej). Irytująco jednak, wsparcie dla tego atrybutu
ustaje
1

Jeśli znajduje się w polu wprowadzania, próbujesz cofnąć żółty kolor ...

  1. Ustaw kolor tła za pomocą css ... powiedzmy #ccc (jasnoszary).
  2. Dodaj wartość = „cośtekst”, co tymczasowo wypełnia pole tekstem „jakiś tekst”
  3. (opcjonalnie) Dodaj trochę javascript, aby „jakiś tekst” był jasny, gdy przejdziesz do umieszczenia prawdziwego tekstu.

Może to wyglądać tak:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />
biały koń
źródło
1

To rozwiązuje problem w Safari i 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
źródło
1
Wierzę, że tak, ale czy nie byłoby to trochę trudne, aby robić to 50 razy na sekundę? Wiem, że to zadziała i nie będzie zbyt wolne. Ale wydaje się trochę za dużo.
Mathijs Segers
0

Zrzut ekranu, do którego utworzyłeś łącze, mówi, że WebKit używa selektora input:-webkit-autofilldla tych elementów. Czy próbowałeś umieścić to w swoim CSS?

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

Jeśli to nie zadziała, prawdopodobnie nic nie zadziała. Pola te są podświetlane, aby ostrzec użytkownika, że ​​zostały automatycznie wypełnione prywatnymi informacjami (takimi jak adres domowy użytkownika) i można argumentować, że zezwolenie na ukrycie strony stwarza zagrożenie bezpieczeństwa.

benzado
źródło
0

formElement ma autocompleteatrybut, który można ustawić na off. Począwszy od CSS, !importantdyrektywa po właściwości zapobiega jej nadpisaniu:

background-color: white !important;

Tylko IE6 tego nie rozumie.

Jeśli źle cię zrozumiałem, jest też outlinewłaściwość, która może Ci się przydać.

zneak
źródło
2
Wydaje się, że Chrome ignoruje! Ważne, gdy automatycznie wypełnia pola wejściowe
Torandi,
@Torandi Może to być spowodowane arkuszami stylów klienta użytkownika. Ustawienia z arkuszy stylów klienta użytkownika powinny obowiązywać jako ostatnie, chyba że ma !importantdyrektywę, w takim przypadku mają pierwszeństwo przed wszystkim innym. Powinieneś sprawdzić arkusz stylów klienta użytkownika (chociaż nie wiem, gdzie go znaleźć).
zneak
0

Widziałem, że funkcja autouzupełniania paska narzędzi Google została wyłączona za pomocą javascript. Może działać z innymi narzędziami do autouzupełniania; Nie wiem, czy to pomoże w przeglądarkach z wbudowanym autouzupełnianiem.

<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>
Adam
źródło
0

Po wypróbowaniu wielu rzeczy znalazłem działające rozwiązania, które nukowały automatycznie wypełniane pola i zastępowały je zduplikowanymi. Aby nie stracić dołączonych wydarzeń, wymyśliłem inne (nieco przydługie) rozwiązanie.

Przy każdym zdarzeniu „input” szybko dołącza zdarzenia „change” do wszystkich zaangażowanych wejść. Sprawdza, czy zostały automatycznie wypełnione. Jeśli tak, wyślij nowe zdarzenie tekstowe, które nakłoni przeglądarkę do myślenia, że ​​wartość została zmieniona przez użytkownika, umożliwiając w ten sposób usunięcie żółtego tła.

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);
  }
});
Ernests Karlsons
źródło
0

Proste rozwiązanie javascript dla wszystkich przeglądarek:

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

Klonuj dane wejściowe, resetuj atrybuty i ukrywaj oryginalne dane wejściowe. W przypadku iPada wymagany jest limit czasu

Grosz
źródło
0

Ponieważ przeglądarka wyszukuje pola typu hasła, innym rozwiązaniem jest umieszczenie ukrytego pola na początku formularza:

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
Kt Mack
źródło
0

Przeczytałem wiele wątków i wypróbowałem wiele fragmentów kodu. Po zebraniu tych wszystkich rzeczy jedynym sposobem, aby wyczyścić pola logowania i hasła oraz zresetować ich tło do białego, było:

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

Zapraszam do komentowania, jestem otwarty na wszystkie ulepszenia, jeśli jakieś znajdziesz.

TwystO
źródło
0

Wyłączone autouzupełnianie nie jest obsługiwane przez nowoczesne przeglądarki. Najłatwiejszym sposobem rozwiązania autouzupełniania, które znalazłem, była mała ścieżka z HTML i JS. Pierwszą rzeczą do zrobienia jest zmiana typu danych wejściowych w HTML z „hasło” na „tekst”.

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

Autouzupełnianie rozpoczyna się po załadowaniu okna. W porządku. Ale kiedy typ twojego pola nie jest „hasłem”, przeglądarka nie wiedziała, jakie pola musi wypełnić. Tak więc nie będzie autouzupełniania w polach formularza.

Następnie powiąż fokus zdarzenia z polem hasła, np. w Backbone:

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

W onInputPasswordFocusIn, po prostu zmień typ pola na hasło, prostym sprawdzeniem:

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

To wszystko!

UPD: ta rzecz nie działa z wyłączonym JavaSciprt

UPD w 2018 roku. Znalazłem też zabawną sztuczkę. Ustaw atrybut readonly na pole wejściowe i usuń go ze zdarzenia aktywności. Po pierwsze uniemożliwia przeglądarce automatyczne wypełnianie pól, po drugie pozwoli na wprowadzanie danych.

volodymyr3131
źródło
Cóż, autouzupełnianie jest częścią standardu, chociaż jego użycie i implementacja mogą się różnić. Ponadto zmiana typów danych wejściowych w IE kończy się spektakularnym niepowodzeniem, dlatego jQuery je blokuje, ale generalnie nie jest dobrym pomysłem, jeśli planujesz wspierać programista
..mozilla.org
@casraf Przepraszamy, jest to część standardu, ale nie działa we wszystkich nowoczesnych przeglądarkach tak, jak musi, więc nie będzie działać tak, jak został wymyślony. W EDGE działa dobrze, o poprzednich wersjach nie można nic powiedzieć (
volodymyr3131
To prawda, że ​​nie wszędzie jest wdrażany. Problem nadal istnieje - w zależności od tego, jak daleko wstecz chcesz obsługiwać IE - przed wersją 11, nie wierzę, że możesz zmienić typ wejścia. Jeśli nie martwisz się o starsze wersje, możesz równie dobrze użyć autocomplete=off, ponieważ działa przez chwilę w FF, Chrome i IE od poprzedniej wersji
casraf
Próbowałem użyć autocomplete = off, zarówno dla danych wejściowych, jak i formularzy, a Chrome nadal wypełnia dane formularzy rejestracji i logowania (. To tylko dziwna magia, ponieważ na podstawie komentarzy, w niektórych przypadkach działa, a niektóre nie =)
volodymyr3131
Wiem, że te standardy nie są konsekwentnie przestrzegane. Szkoda, utrudnia nam życie :(
casraf
0

Spróbuj z autocomplete = "none" w tagu wejściowym

To działa dla mnie

Vayodya Tamari
źródło
0

Musiałem także zmienić kolor tekstu na coś ciemniejszego (zobacz ciemne kolory motywu StackOverflow).

Skończyło się na hybrydzie @ Tamás Pap, @MCBL i rozwiązania @ don:

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;
}
Andrei
źródło
-3

Dlaczego nie umieścić tego w swoim css:

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

To powinno rozwiązać Twój problem. Chociaż powoduje to problem z użytecznością, ponieważ teraz użytkownik nie widzi, że formularz został automatycznie wypełniony w sposób, do którego jest przyzwyczajony.

[edytuj] Po opublikowaniu tego zobaczyłem, że podobna odpowiedź została już udzielona i że skomentowałeś ją, że nie działa. Nie bardzo rozumiem dlaczego, ponieważ zadziałało, kiedy go przetestowałem.

Kris
źródło
nie działa zarówno w Chrome, jak i Safari. styl jest input:-webkit-autofilli input --webkit-autocompletepo prostu nie istnieje
ruruskyi
@EliseuMonar: Jestem pewien, że nie kłamałem, ale nie pamiętam szczegółów, jak i gdzie to testowałem. Sam kod został prawdopodobnie wpisany z pamięci, a nie skopiowany / wklejony, więc autouzupełnianie czy autouzupełnianie? Nie wiem.
Kris
-3

PRAWDZIWYM problemem jest to, że Webkit (Safari, Chrome, ...) ma błąd. Gdy na stronie znajduje się więcej niż jeden [formularz], każdy z [typ wejściowy = "tekst" nazwa = "foo" ...] (tj. Z tą samą wartością atrybutu „nazwa”), wtedy gdy użytkownik powróci na stronę autouzupełnianie zostanie wykonane w polu wejściowym PIERWSZEGO [formularza] na stronie, a nie w [formularzu], który został wysłany. Za drugim razem NEXT [formularz] zostanie wypełniony automatycznie i tak dalej. Wpłynie to tylko na [formularz] z tekstowym polem wejściowym o TEJ SAMEJ nazwie.

Należy to zgłosić programistom Webkit.

Opera automatycznie wypełnia prawy [formularz].

Firefox i IE nie uzupełniają się automatycznie.

Więc powtarzam: to błąd w Webkicie.

Per Lindberg
źródło