it-swarm.com.de

So blenden Sie das Autofill-Safari-Symbol im Eingabefeld aus

Jedes meiner Eingabefelder hat das Symbol der kleinen Person mit dem Pfeil in Safari. Wie kann ich das deaktivieren? Ich habe übrigens eine ähnliche Seite und das passiert nicht. Ich habe versucht, alle Stile im Web-Inspector auszuschalten, und auf einer Seite befindet sich noch das Symbol. Ich weiß also nicht, ob es css oder html ist.

29
Kris Jones

Wenn Sie es vollständig ausblenden möchten, können Sie die folgenden CSS-Tricks verwenden. Grundsätzlich erkennt es die Schaltfläche "Kontakte füllen" und entfernt sie von Ihrem Eingabefeld. Vergewissern Sie sich, dass Sie 'absolute: position' haben, um eine zusätzliche Auffüllung Ihrer Felder zu vermeiden.

input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}
54
Jimba Tamang

Sie müssen nicht alle Eigenschaften der Schaltflächen zum automatischen Ausfüllen aufheben.

Um die Icons von Safari vollständig auszublenden, können Sie auch den Wrapper ausblenden.

Da es sich bei den Symbolen um Schatteninhalt handelt, zeigt der DOM ihn nicht an, der Schatten-DOM jedoch. Aktivieren Sie einfach den '<>' - Button im Inspector.

Dort finden Sie den Verpackungscontainer, den Sie mit css wie folgt anvisieren können:

input::-webkit-textfield-decoration-container {
  display: none; /* or whatever styling you want */
}

Darin finden Sie den Passwort-Schlüsselbund und die Feststelltaste:

input::-webkit-caps-lock-indicator {
}

input::-webkit-credentials-auto-fill-button {
}

Oh, und wenn Sie gerade dabei sind, vergessen Sie nicht IE mit seinen klaren Tasten und den Passwinkelsymbolen:

input::-ms-clear {
}

input::-ms-reveal {
}
14
Gwerty

Automatisches Ausfüllen des Safari-Symbols im Feld input password:

::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}
9
Vadizar

Related: Ich wollte die Position des Schlüsselsymbols für einen input[type="password"] anpassen, konnte aber den Pseudoelement-Selektor nirgends finden.

Also habe ich die Webkit-Quelle geklont und konnte sie finden :)

input::-webkit-credentials-auto-fill-button

4
Stephen Chai

Als Hinweis: Überprüfen Sie auch die Feldbezeichnungen und die placeholder-Attributwerte. Diese können dazu führen, dass Popups mit automatischer Vervollständigung erscheinen, obwohl die CSS-Stilregeln dagegen angewendet werden.

Siehe unten für mehr Details ...


Es sollte beachtet werden, dass in Safari (mindestens Version 11 und wahrscheinlich auch früheren Versionen und anderen neueren Browsern, z. B. Chrome, Firefox usw.), auch wenn die verschiedenen CSS-Workarounds zum Ausblenden der Autocomplete-Popups vorhanden sind, sofern vorhanden Das Feld scheint für den Browser ein Benutzername oder ein Kennwort zu sein. Das Feld für die automatische Vervollständigung wird weiterhin angezeigt.

Ich habe festgestellt, dass der Browser nicht nur das name-Attribut des <input>-Tags auf Schlüsselwörter wie username, login und ähnliche Varianten prüft, sondern auch den Inhalt eines beliebigen placeholder-Attributtexts im Feld sowie überraschenderweise den angrenzenden Text zu berücksichtigen in das <input>-Feld, z. B. das Feld, das als Formularfeldbezeichnung verwendet wird. Der Beschriftungstext muss nicht in ein <label>-Tag eingefügt werden, um diesen Effekt zu erzielen - nur um in unmittelbarer Nähe des Feldes zu sein, obwohl ich keine Gelegenheit hatte, ausführlich zu testen und zu bestimmen, was als "nahe Nähe" betrachtet wird - dies wird der Fall sein erfordern einige weitere Untersuchungen und Experimente oder, wenn möglich, eine Überprüfung des Quellcodes der verschiedenen Webbrowser-Rendering-Engines - beispielsweise für WebKit.

Wenn Sie also Schlüsselwörter wie username, user name, login oder ähnliche Varianten sowie Varianten für password haben, zeigt der Browser das Autocomplete-Popup an, wenn das Feld fokussiert ist, trotz aller CSS-Regeln, um es auszublenden!

Ich war zwar nicht so überrascht, dass das Popup durch die Attributwerte name oder placeholder des <input>-Tags aktiviert wurde, aber ich war überrascht zu sehen, dass der Beschriftungstext auch vom Browser berücksichtigt wurde. Daher musste ich den Wortlaut und die Beschriftung der Felder ändern um sicherzustellen, dass die Popups nicht angezeigt wurden. Ich habe zum Beispiel festgestellt, dass der Platzhaltertext von 'Please enter your username...' in 'Please enter your user-name...' geändert wurde, sodass der Browser das Feld nicht als Benutzernamefeld erkennen konnte. Beachten Sie auch den Bindestrich zwischen den Wörtern user und name - ohne den Bindestrich zwischen den Wörtern Wie können Edge-Fälle geprüft werden, nach denen die Browser suchen. Ich habe bereits das name-Attribut des Felds und die angrenzende Beschriftung in dieser Phase geändert, um Verweise auf die auslösenden Schlüsselwörter oder deren Varianten zu entfernen.

Es ist offensichtlich, dass Browser einige interessante Seitenüberprüfungen durchführen, um zu bestimmen, ob Popup-Fenster mit Benutzernamen/Kennwort angezeigt werden sollen. Dies ist zwar ein hervorragendes Gesamtverhalten, das die Benutzer dazu ermutigt, Kennwortmanager für eine sicherere Erzeugung und Speicherung von Berechtigungsnachweisen zu nutzen Sie möchten nicht, dass das Autocomplete-Popup angezeigt wird. Es gibt Anwendungsfälle, z. B. in einer Admin-Benutzeroberfläche, mit denen Administratoren beispielsweise Benutzerkonten für Mitarbeiter verwalten können, in denen Sie ein Feld für die Suche nach einem Personalbenutzer anhand seines Benutzernamens anbieten möchten. In solchen Fällen möchten Sie nicht, dass das Popup mit automatischer Vervollständigung versucht, das Feld mit Ihrem eigenen Benutzernamen auszufüllen, sondern Sie können stattdessen beispielsweise eine beliebige Anzahl von Benutzernamen für Angestellte eingeben. Es wäre großartig, wenn eines der Standardkennzeichen autocomplete='off' oder eine zukünftige Variante von den Browseranbietern übernommen würde, um diese saubere Kontrolle über das Autocomplete-Verhalten oder ein standardmäßiges CSS-Attribut bereitzustellen, das bei seiner Anwendung immer die beabsichtigte Wirkung hatte ... aber leider ist derzeit nicht der Fall.

Wenn Sie sich jedoch mit diesem Problem beschäftigen, sollten Sie zunächst den Inhalt jedes placeholder-Attributs berücksichtigen, das Sie zu Benutzernamen oder Kennwort <input>-Feldern hinzugefügt haben, sowie alle beschriftungsähnlichen Texte, die in der Nähe angezeigt werden. Wenn Sie die Werte dieser Bezeichnungen/Attribute anpassen und mit ihnen experimentieren, sollten Sie in der Lage sein, die Seitenprüflogik zu umgehen, die die Browser verwenden, um diese Popup-Popups mit automatischer Vervollständigung zu aktivieren.

Wie immer im Web und da einige Rendering-Engines des Browsers Closed Source sind, wird dies wahrscheinlich eher eine Kunst als eine Wissenschaft sein, bis ein Standard entwickelt wird, der die Kontrolle dieser Funktion für alle Browser auf allen Plattformen ermöglicht. Es kann erforderlich sein, den Code gelegentlich erneut zu überprüfen, um ihn mit neuen Browserversionen zu vergleichen, um sicherzustellen, dass Popups aufgrund geänderter Seiteninspektionslogik nicht erneut angezeigt werden.

1
bluebinary

https://i.stack.imgur.com/qgYIE.png

Wenn du benutzt <input> Feld ohne es in <form> Tag, Safari 11+ oder neuer zeigen Ihnen Vorschläge zum automatischen Ausfüllen. Hier ist also, was Sie tun können.

Option 1: Stellen Sie sicher, dass <input> Elemente werden in <form> Element. Setzen Sie den Wert des Namensattributs nicht auf "Benutzername" oder "Anmelden".

Option 2: Fügen Sie das name Attribut hinzu und setzen Sie den Wert auf "search". <input type="text" name="search">

Hinweis: Verwenden von autocomplete="off" oder autocomplete="false" an jeder <form> und <input> würde nicht helfen. Weder das Hinzufügen der folgenden CSS-Eigenschaften würde funktionieren.

input::-webkit-autofill,
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button
0
Muhammad Tahir