Wyłącz autouzupełnianie przez CSS

Czy można użyć CSS, aby wyłączyć autouzupełnianie w elemencie formularza (w szczególności w polu tekstowym)?

Używam biblioteki tagów, która nie pozwala na element autouzupełniania i chciałbym wyłączyć autouzupełnianie bez używania JavaScript.

Możesz użyć wygenerowanego idi nameza każdym razem, który jest inny, więc przeglądarka nie pamięta tego pola tekstowego i nie zasugeruje niektórych wartości.

Jest to przynajmniej bezpieczna alternatywa dla różnych przeglądarek, ale polecam skorzystać z odpowiedzi od RobertsonM ( autocomplete="off").

W obecnej postaci w CSS nie ma atrybutu „autouzupełnianie wyłączone”. Jednak HTML ma do tego łatwy kod:

<input type="text" id="foo" value="bar" autocomplete="off" />

Jeśli szukasz efektora obejmującego całą witrynę, prostym rozwiązaniem byłoby posiadanie funkcji js, która przeszłaby przez wszystkie „dane wejściowe” i dodała ten znacznik lub poszukałaby odpowiedniej klasy / identyfikatora CSS.

Atrybut autouzupełniania działa dobrze w Chrome i Firefox (!), Ale zobacz także Czy istnieje poprawny sposób W3C na wyłączenie autouzupełniania w formularzu HTML?

możesz łatwo wdrożyć przez jQuery

$('input').attr('autocomplete','off');

Jeśli używasz form, możesz wyłączyć wszystkie autouzupełnianie za pomocą,

<form id="Form1" runat="server" autocomplete="off">

CSS nie ma takiej możliwości. Musisz użyć skryptów po stronie klienta.

Wypróbowałem wszystkie sugerowane sposoby z tych odpowiedzi na pytania i innych artykułów w Internecie, ale i tak nie działałem. Próbowałem autocomplete = "new-random-value", autocomplete = "off" w elemencie formularza, używając skryptu po stronie klienta, jak poniżej, ale poza $ (document) .ready (), jak wspomniał jeden z użytkowników:

$(':input').on('focus', function () {
  $(this).attr('autocomplete', 'off')
});

Znalazłem może inny priorytet w przeglądarce, który powoduje to dziwne zachowanie! Szukałem więc więcej i na koniec ponownie uważnie przeczytałem poniższe wiersze z tego dobrego artykułu :

Z tego powodu wiele nowoczesnych przeglądarek nie obsługuje funkcji autocomplete = "off" dla pól logowania:

Jeśli witryna ustawia autocomplete = "off" na a, a formularz zawiera pola do wprowadzania nazwy użytkownika i hasła, przeglądarka nadal będzie oferować zapamiętanie tego loginu, a jeśli użytkownik wyrazi zgodę, automatycznie wypełni te pola następnym razem, gdy użytkownik odwiedza stronę. Jeśli witryna ustawi autocomplete = "off" dla pól nazwy użytkownika i hasła, przeglądarka nadal będzie oferować zapamiętanie tego loginu, a jeśli użytkownik wyrazi zgodę, automatycznie wypełni te pola przy następnej wizycie użytkownika na stronie. Tak jest w Firefoksie (od wersji 38), Google Chrome (od 34) i Internet Explorerze (od wersji 11).

Jeśli definiujesz stronę zarządzania użytkownikami, na której użytkownik może określić nowe hasło dla innej osoby, a zatem chcesz zapobiec automatycznemu wypełnianiu pól hasła, możesz użyć funkcji autocomplete = "nowe-hasło" ; jednak obsługa tej wartości nie została zaimplementowana w przeglądarce Firefox.

Po prostu zadziałało. Próbowałem specjalnie w chrome i mam nadzieję, że to nadal działa i pomaga innym.

Rozwiązałem problem, dodając fałszywą nazwę autouzupełniania dla wszystkich danych wejściowych.

$("input").attr("autocomplete", "fake-name-disable-autofill");

Są na to 3 sposoby, wymieniam je, aby być lepszym ...

Sposób 1-HTML:

<input type="text" autocomplete="false" />

Sposób 2-Javascript:

document.getElementById("input-id").getAttribute("autocomplete") = "off";

3-jQuery sposób:

$('input').attr('autocomplete','off');

Dzięki rozwiązaniu @ ahhmarr udało mi się rozwiązać ten sam problem w moim środowisku Angular + ui-router , którym podzielę się tutaj dla wszystkich zainteresowanych.

W moim index.htmldodałem następujący skrypt:

<script type="text/javascript">
    setTimeout(function() {
        $('input').attr('autocomplete', 'off');
    }, 2000);
</script>

Następnie, aby uwzględnić zmiany stanu, w moim kontrolerze głównym dodałem:

$rootScope.$on('$stateChangeStart', function() {
                $timeout(function () {
                    $('input').attr('autocomplete', 'off');
                }, 2000);
            });

Limity czasu mają być renderowane przez kod HTML przed zastosowaniem jquery.

Jeśli znajdziesz lepsze rozwiązanie, daj mi znać.

Nie możesz użyć CSS do wyłączenia autouzupełniania, ale możesz użyć HTML:

<input type="text" autocomplete="false" />

Technicznie rzecz biorąc, możesz zastąpić falsedowolną nieprawidłową wartością i zadziała. To jedyne rozwiązanie, które znalazłem na iOS, które działa również w Edge.

Po prostu używam 'new-password'zamiast 'off'autouzupełniania.

i też spróbuję użyć tego kodu i działa (przynajmniej z mojej strony), używam WP i GravityForm dla twoich informacji

$('input').attr('autocomplete','new-password');

$('input').attr('autocomplete','off');